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>

新的主题可能还不是Material Icons字体的一部分。链接。

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

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

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

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

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

vs

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

对于Angular用户(在v14上测试):

如果你想改变图标的全局使用主题为例如:outline，你可以在你的AppModule或任何你需要的地方这样做:

export class AppModule {
  constructor(private readonly iconRegistry: MatIconRegistry) {
    const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
    const outlinedFontSetClasses = defaultFontSetClasses
      .filter(fontSetClass => fontSetClass !== 'material-icons')
      .concat(['material-icons-outlined']);
    iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
  }
}

defaultFontSetClasses还包括mat-ligatu -font类名，如果你在<mat-icon>元素中使用[fontIcon]属性绑定，为了正确呈现图标，你需要保留这个名称。

另外，记得加载Material Icons outlines样式表:

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

为了https://material.angular.io/components/icon/api # MatIconRegistry

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

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

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

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