wake-up-neo.com

Wie kann man die Farbe eines Icons in Angular Material?

Ich habe das, von dem ich annehmen würde, dass es funktioniert, aber nicht:

<mat-icon color="white">home</mat-icon>

Dann habe ich auch:

<button mat-raised-button color="accent" type="submit"
 [disabled]="!recipientForm.form.valid">
    <mat-icon color="white">save</mat-icon>SAVE
</button>

Dieses Code-Snippet funktioniert aus irgendeinem Grund (zeigt das Symbol als weiß an).

Wie bekomme ich den einsamen mat-icon um als weiß zu erscheinen mit das color Attribut? (Ich kann einfach eine weiße Klasse hinzufügen, aber ich möchte das verstehen.)

angularangular-materialangular-material2
33
Joshua Kemmerer

Das liegt daran, dass die Eingabe color nur drei Attribute akzeptiert: "primary", "accent" oder "warn". Mit anderen Worten, Sie entweder:

  1. Stellen Sie Ihr Thema als Weiß für Primär/Akzent ein.

    styles.scss:

    @import '[email protected]/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-white);
$app-accent:  mat-palette($mat-pink);
$app-theme: mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);

  2. Verwendung ist wie folgt:

    <mat-icon color="primary">menu</mat-icon>

Oder:

  1. Füge einfach eine Klasse hinzu, um dein Icon zu stylen:

    .white-icon {
    color: white;
}
/* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
.white-icon svg {
    fill: white;
}

  2. Fügen Sie die Klasse zu Ihrem Symbol hinzu:

    <mat-icon class="white-icon">menu</mat-icon>
57
Edric

Fügen Sie in der Datei component.css oder app.css Symbolfarbstile hinzu

.material-icons.color_green { color: #00FF00; }
.material-icons.color_white { color: #FFFFFF; }

Stellen Sie in der component.html die Icon-Klasse ein

<mat-icon class="material-icons color_green">games</mat-icon>
<mat-icon class="material-icons color_white">cloud</mat-icon>

ng bauen

9
sfanjoy

Oder einfach

füge deinem Element hinzu

[ngStyle]="{'color': , myVariableColor}"

z.B

<mat-icon [ngStyle]="{'color': myVariableColor}">{{ getActivityIcon() }}</mat-icon>

Wobei color an einer anderen Komponente usw. Definiert werden kann

8
Jimmy Kane
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
2
Matheus Frik

color="white" Ist kein bekanntes Attribut für Angular Material.

das Farbattribut kann in primary, accent und warn geändert werden. wie gesagt in diesem doc

ihr Symbol innerhalb der Schaltfläche funktioniert, weil die übergeordnete Klasse der Schaltfläche die CSS-Klasse color:white hat oder möglicherweise Ihre color="accent" weiß ist. Überprüfen Sie die Entwicklertools, um es zu finden.

Standardmäßig verwenden Symbole die aktuelle Schriftfarbe

0
Hareesh