9

I use the material icon in my Angular app, and I want to use the two-tone icon. How can I change the color of the icon? I tried with the classic color: red; in my CSS file but doesn't work. Can you help me, please?

Here are a Stackblitz example

Nmk
  • 1,281
  • 2
  • 14
  • 25
Hino-D-Bit
  • 134
  • 2
  • 6

1 Answers1

13

Following this Thread you can use the color css key except for materials two tone theme which seems to be glitchy ;-)

A workaround is described in one of several angular material github issue's by using a custom css filter. This custom filter can be generated here.

E.g.:

Html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone  red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

Attachments:

zerocewl
  • 11,401
  • 6
  • 27
  • 53
  • It seems this is even what Google does in fonts.google.com/icons! Inspector shows they apply `filter: contrast(4) invert(1);` – Ky - Apr 04 '22 at 17:38
  • The latest comment on https://github.com/material-components/material-components-web-react/issues/730#issuecomment-1071052873 worked best for me! – guacamole Apr 04 '22 at 21:09