0

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

saravana kumar ramasamy
  • 111
  • 8

1 Answers1

0

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>
Palak Jadav
  • 1,202
  • 1
  • 11
  • 23
  • Thanks for your explaination..But In angular 4, don't have any class and the css can be applied using the icon name like below. html :add_alert css: mat-icon.add-alert{ color : purple }. why the above code works? – saravana kumar ramasamy May 01 '20 at 06:21