How do I change the color of an md-icon in Angular Material? How do I change the color of an md-icon in Angular Material? angularjs angularjs

How do I change the color of an md-icon in Angular Material?


I'm on angular-material 0.8, and I simply added

    style="color:white;font:bold;" 

to the md-icon element.


For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.

I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.

After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.


The SVG is under the md-icon, so you could add this to your style:

md-icon {  color: red}md-icon svg {  fill: inherit;}