How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

Question

Google has revamped its Material Design Icons with 4 new preset themes:

Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Fil

Answer 1

Setting up the Two-tone color:

As described above 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:

home

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