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

Posted 2023-02-22

【中文标题】Material Icon Two-Tone：如何改变图标的​​颜色？

【英文标题】：Material Icon Two-Tone: How to change the color of icon?

【发布时间】：2020-07-01 20:32:44

【问题描述】：

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

Here are a Stackblitz example

【问题讨论】：

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

【参考方案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%);

附件：

工作角度Stackblitz Codepen example Codepen CSS filter Generator