How to set the color of an icon in Angular Materia

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

color="white" is not a known attribute to Angular Material.

color attribute can changed to primary, accent, and warn. as said in this doc

your icon inside button works because its parent class button has css class of color:white, or may be your color="accent" is white. check the developer tools to find it.

By default, icons will use the current font color

Answer 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

Answer 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

Answer 4

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

Answer 5

That's because the color input only accepts three attributes: "primary", "accent" or "warn". In other words, you either:

1. Set your theme as white for primary/ 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);
   

   EDIT: If you view the list of palettes that are available in the _palette.scss file, there's no such $mat-white palette variable being declared. As such, this approach is invalid.

2. Use the class as shown below:

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

Or:

1. Just 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>
   

Answer 6

Since for some reason white isn't available for selection, I have found that mat-palette($mat-grey, 50) was close enough to white, for my needs at least.