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

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

md-icon {
  color: red
}

md-icon svg {
  fill: inherit;
}

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.

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

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

to the md-icon element.

The following is the only way I've gotten it to work via stylesheets.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}