How to set the color of an icon in Angular Material?
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:
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;}Add the class to your icon:
<mat-icon class="white-icon">menu</mat-icon>
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
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