How to properly change the color of a mat-icon with angular?

Question

I have looked at the documentation and I have tried to change the color of a mat-icon like so:

<mat-icon class="white" color="primary" svgIcon="back"></mat-icon><span class="backText">back</span>

The above is how the element looks in the html. I have tried to change the color of the icon by adding a class with a color of white. Which does not work. I have tried adding the directive color="primary" which does not work either while all my buttons that look like this

 <button mat-button color='primary'>example button</button>

do receive the color. I want to get my mat-icon to change color with the color palette because this should work according to the docs. But ultimately I would also like to be able to change the color of the icon to white which is a color not on my color palette.

How can I change the color of <mat-icon> to a color from a working color palette as well as a color not on the color palette?

Thanks!

Answer 1

Use NgStyle directive.

<mat-icon [ngStyle]="{'color':'white'}">home</mat-icon>

Answer 2

You have two options to change the color of a mat-icon.

Color Attribute

You can use the color attribute which will use the value specified in your theme. It only accepts three attributes: "primary", "accent" or "warn".

<mat-icon color="primary" svgIcon="archive"></mat-icon>
<mat-icon color="accent" svgIcon="archive"></mat-icon>
<mat-icon color="warn" svgIcon="archive"></mat-icon>

Custom Style

Add a custom style class with color specified:

.green-icon {
    color: green;
}

Add class to your icon:

<mat-icon class="green-icon" svgIcon="archive"></mat-icon>

Demo

I have created a demo on stackblitz that changes color of an SVG mat-icon.