设置双色:

如上所述，你可以使用颜色css键，除了材质双色调主题，这似乎是故障;-)

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

附件:

Working Angular Stackblitz Codepen例子 代码依赖CSS过滤器生成器

webfonts链接现在工作，在所有浏览器!

只需将您的主题添加到由管道(|)分隔的字体链接，就像这样

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

然后引用这个类，就像这样:

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

这个模式也适用于Angular Material:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

我最终使用IcoMoon应用程序创建了一个自定义字体，只使用我最近的web应用程序构建所需的新主题图标。它不是完美的，但你可以模仿现有的谷歌字体功能非常好，只需一点点设置。这里是一个总结:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

如果有人胆子大，他们可以用IcoMoon转换整个主题。IcoMoon可能有一个内部流程，因为他们已经在他们的库中设置了原始的材质图标。

不管怎样，这不是一个完美的解决方案，但对我来说很有效。

有点滑稽的是，谷歌制作了一种在Safari中正常工作但在Chrome中不正常的字体。这里是https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

参考https://stackoverflow.com/a/54902967/4740291，不能改变使用css的颜色。

对于角材质，你应该使用fontSet输入来改变字体族:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

对我来说有用的是在图标名称后使用_outline而不是_outline。

<mat-icon>info</mat-icon>

vs

<mat-icon>info_outline</mat-icon>