如果你已经在你的web项目中使用了材质图标，只需要更新html文件中的引用和图标使用的类:

html引用:

之前

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

后

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

材质图标类:

之后，检查你使用的className:

之前:

<i className="material-icons">weekend</i>

后:

<i className="material-icons-outlined">weekend</i>

这对我很有用……对于维达!

对于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

新的主题可能还不是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的颜色。

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

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

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

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

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