web-dev-qa-db-de.com

So fügen Sie ein Symbol zur Matten-Symbol-Schaltfläche hinzu

Ich verwende Angular with Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

Ich versuche, der Schaltfläche ein Symbol hinzuzufügen, aber ich kann nicht herausfinden, wie es geht, und ich kann keine Dokumentation dafür finden.

https://material.angular.io/components/button/api

in den Dokumenten suchen, gibt es folgendes:

 enter image description here

diese Schaltfläche hat das folgende HTML:

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

ist das der richtige Weg, um es zu tun?

17
Alexander Mills

Fügen Sie einfach den <mat-icon> in mat-button oder mat-raised-button hinzu. Siehe das Beispiel unten. Nicht, dass ich zu Demonstrationszwecken Materialsymbole anstelle Ihrer SVGs verwende:

<button mat-button>
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

ODER 

<button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

Hier ist ein Link zu stackblitz demo .

38
Faisal

Sie müssen lediglich die Direktive mat-icon-button zum button-Element in Ihrer Vorlage hinzufügen. Geben Sie im button-Element das gewünschte Symbol mit einer mat-icon -Komponente an.

Sie müssen MatButtonModule und MatIconModule in Ihre App-Moduldatei importieren.

Klicken Sie auf der Beispielseite der Angular-Material-Schaltflächen auf die Schaltfläche zum Anzeigen des Codes. Daraufhin werden einige Beispiele angezeigt, in denen die Material-Icons-Schriftart verwendet wird, z.

<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

In Ihrem Fall verwenden Sie

<mat-icon>thumb_up</mat-icon>

Gemäß der Kurzanleitung unter https://material.angular.io/guide/getting-started müssen Sie die Material-Symbol-Schriftart in Ihre index.html laden.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Oder importiere es in deine globalen styles.scss.

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Wie erwähnt, kann jede Symbolschriftart mit der Mat-Symbolkomponente verwendet werden.

9
Jason Schroder

Fügen Sie app.module.ts hinzu

importiere {MatIconModule} aus '@ angle/material/icon';

& Link in Ihrem globalen index.html.

2

Ich bevorzuge das inline-Attribut. Dadurch wird das Symbol mit der Größe der Schaltfläche korrekt skaliert.

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

Ich füge dies meinem styles.css hinzu:

  • lösen Sie das vertikale Ausrichtungsproblem des Symbols innerhalb der Schaltfläche
  • material-Icon-Schriften sind im Vergleich zum Schaltflächentext immer etwas zu klein
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}
2
rynop

das obige CSS kann wie folgt in SASS geschrieben werden (und es enthält tatsächlich alle Schaltflächentypen, anstatt nur button.mat-button)

button,
a {
    &.mat-button,
    &.mat-raised-button,
    &.mat-flat-button,
    &.mat-stroked-button {
        .mat-icon {
            vertical-align: top;
            font-size: 1.25em;
        }
    }
}
0
Remco Nonhebel

Die Materialsymbole verwenden die Symbolsymbolschrift. Die Schriftart muss der Seite hinzugefügt werden.

Hier ist das CDN von Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
0
Alex