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

Question

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

这是一个 Stackblitz 示例

Answer 1

在此线程之后，您可以使用colorcss 键，但材料两音主题似乎有问题；-)

通过使用自定义 css 过滤器，在几个角度材料 github问题之一中描述了一种解决方法。可以在此处生成此自定义过滤器。

例如：

网址：

<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 CSS 过滤器生成器