谷歌修改了它的材质设计图标，有4个新的预设主题:
除了常规的填充/基线主题之外，概述，圆形，双色和锐:
但是，不幸的是，它没有说明如何使用新的主题。
我一直在通过谷歌Web字体使用它，包括链接:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
然后使用文档中建议的所需图标:
<i class="material-icons">account_balance</i>
但它总是显示“填充/基线”版本。
我尝试了以下方法来使用outline主题:
<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>
并且，更改Web字体链接为:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">
等。但这并不奏效。
这样瞎猜是没有意义的。
有人尝试过使用新的主题吗?它甚至像基线版本(内联html标签)一样工作吗?或者，它只能以SVG或PNG格式下载吗?
我不满意，直到知道谷歌还没有发布他们的新设计字体或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>
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>
我不满意，直到知道谷歌还没有发布他们的新设计字体或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>
截至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类。
