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

Question

J'ai ceci, qui devrait fonctionner, mais qui ne fonctionne 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 (l'icône apparaît en blanc).

Comment puis-je obtenir l'unique mat-icon se présenter comme blanc en utilisant le site color attribut ? (Je peux facilement ajouter une classe blanche, mais je veux comprendre).

Answer 1

C'est parce que le color n'accepte que trois attributs : "primary" , "accent" o "warn" . En d'autres termes, soit vous :

1. Choisissez le blanc comme couleur principale et comme couleur d'accentuation.

   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. L'utilisation est la suivante :

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

Ou :

1. Il suffit d'ajouter une classe pour donner du style à 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>

Answer 2

Dans le fichier component.css ou app.css, ajoutez les styles de couleur des icônes.

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

Dans le fichier component.html, définissez la classe de l'icône

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

ng construire

Answer 3

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 au niveau d'un autre composant, etc.

Answer 4

color="white" n'est pas un attribut connu d'Angular Material.

l'attribut de couleur peut être changé en primary , accent y warn . comme dit dans ce doc

votre icône à l'intérieur du bouton fonctionne parce que sa classe parente, le bouton, a une classe css de color:white ou peut-être votre color="accent" est blanc. Vérifiez les outils du développeur pour le trouver.

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

Answer 5

<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>