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

Question

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)

Answer 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>