web-dev-qa-db-fra.com

Comment définir la couleur d'une icône dans Angular Material?

J'ai ceci, que je supposerais fonctionner, mais ne le fait pas:

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

Ensuite, j'ai aussi:

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

Cet extrait de code, pour une raison quelconque, fonctionne (affiche l'icône en blanc).

Comment faire en sorte que le seul mat-icon apparaisse en blanc avec l'attribut color? (Je peux facilement ajouter une classe blanche, mais je veux comprendre cela)

angularangular-materialangular-material2
33
Joshua Kemmerer

En effet, l'entrée color n'accepte que trois attributs: "primary", "accent" ou "warn". En d'autres termes, vous pouvez soit:

  1. Définissez votre thème en blanc pour primaire/accent.

    styles.scss:

    @import '~@angular/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. Utilisation est comme ci-dessous:

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

Ou:

  1. Ajoutez simplement une classe pour styler votre icône:

    .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. Ajoutez la classe à votre icône:

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

Dans le composant.css ou app.css, ajoutez des styles de couleur d'icône.

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

Dans le composant.html, définissez la classe d'icônes

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

ng construire

9
sfanjoy

Ou simplement

ajouter à votre élément

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

par exemple

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

Où color peut être défini sur un autre composant, etc.

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

color="white" n'est pas un attribut connu de Angular Matériau.

l'attribut color peut être changé en primary, accent et warn. comme dit dans ce doc

votre icône à l'intérieur du bouton fonctionne parce que son bouton de classe parent a la classe css de color:white, ou peut être votre color="accent" est blanc. vérifiez les outils de développement pour le trouver.

Par défaut, les icônes utiliseront la couleur de police actuelle.

0
Hareesh