Material Icon Two-Tone：如何改变图标的颜色？

【问题标题】：Material Icon Two-Tone: How to change the color of icon?Material Icon Two-Tone：如何改变图标的颜色？
【发布时间】：2020-07-01 20:32:44
【问题描述】：

我在我的 Angular 应用程序中使用材质图标，并且我想使用双色图标。如何更改图标的颜色？我尝试了经典颜色：红色；在我的 CSS 文件中，但不起作用。你能帮帮我吗？

Here are a Stackblitz example

【问题讨论】：

你能粘贴你的代码或创建一个小提琴吗？

标签： html css angular-material material-design

【解决方案1】：

在这个Thread 之后，您可以使用color css 键，但材料两色调主题似乎有问题;-)

使用自定义 css 过滤器在几个有角材料 github issue 之一中描述了一种解决方法。这个自定义过滤器可以生成here。

例如：

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

附件：

【讨论】：