我最终使用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的颜色。

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

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

vs

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

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

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

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

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

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

我不满意，直到知道谷歌还没有发布他们的新设计字体或svg图标集。因此，我把一个小的npm包放在一起来解决这个问题。

https://www.npmjs.com/package/ts-material-icons-svg

只需导入你想要使用的图标，并将它们添加到你的注册表。这也支持摇树，因为只有那些图标添加到你的项目，你真正想要和/或需要。

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

以使用两个音调图标为例

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

在您的html模板中，您现在可以使用新的图标

<mat-icon svgIcon="edit"></mat-icon>