mat-icon css color style is not applying

Question

As a fresher in Angular.I have a doubt.In Angular 4, we have an md-icon tag from MdIconModule which was after changed to MatIconModule in later angular version.

consider a code in Angular 4

app.component.html

<md-icon>add_alert</md-icon>

app.componentn.css

md-icon.add-alert{ color : purple }

In above code, the icon has been changed to purple from black.

But in Angular 9,

app.component.html

<mat-icon>add_alert</mat-icon>

app.componentn.css

mat-icon.add-alert{ color : purple }

The above code didn't change the color.And also we need to manually add the class in the tag to change the color.

can anyone explain the cause

Answer 1

You can apply style to mat-icon like this way

::ng-deep{
   mat-icon {
        font-size: 24px;
        color: #3b86ff;
      }
 }

OR

.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;
}


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