How to set the color of an icon in Angular Material?

I have this, which I would assume to work, but doesn't:

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

Then, I also have:

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

This code snippet, for some reason, does work (shows the icon as white).

How do I get the lone mat-icon to show up as white using the color attribute? (I can easily just add a white class, but I want to understand this)

Solution 1:

That's because the color input only accepts three attributes: "primary", "accent" or "warn". Hence, you'll have to style the icons the CSS way:

1. Add a class to style your icon:

   .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. Add the class to your icon:

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

Solution 2:

In the component.css or app.css add Icon Color styles

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

In the component.html set the icon class

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

ng build

Solution 3:

Or simply

add to your element

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

eg

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

Where color can be defined at another component etc