Материал Icon Two-Tone: Как изменить цвет иконки?

Question

Я использую значок материала в своем приложении Angular и хочу использовать двухцветный значок. Как я могу изменить цвет иконки? Я попробовал с classi c цвет: красный; в моем CSS файле, но не работает. Можете ли вы помочь мне, пожалуйста?

Вот пример Stackblitz

Answer 1

После этого Thread вы можете использовать клавишу color css, за исключением двухтональной темы материалов, которая кажется глючной; -)

Обходной путь описан в одном из несколько angular материалов github выпускают с помощью пользовательского фильтра css. Этот пользовательский фильтр может быть сгенерирован здесь .

Например:

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%);
}

Навесное оборудование:

• Рабочий Angular Stackblitz
• Пример Codepen
• Codepen CSS Генератор фильтров