Material Icon Two-Tone: How to change the color of icon?

Question

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

Answer 1

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:

• Working Angular Stackblitz
• Codepen example
• Codepen CSS filter Generator