Aj334最近的编辑工作完美。

谷歌CDN

<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">

图标元素

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

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

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

vs

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

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>

截至2020年12月5日，你需要

1. 包括CSS:

<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">

2. 像这样使用它:

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

注意:例如，要使用outline样式，你需要指定material-icons和material-icons-outline类。

设置双色:

如上所述，你可以使用颜色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过滤器生成器

对于角材质，你应该使用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>
...