谷歌修改了它的材质设计图标，有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>
到目前为止，没有一个答案解释如何下载该字体的各种变体，以便您可以从自己的网站(WWW服务器)提供它们。
虽然从技术角度来看，这似乎是一个小问题，但从法律角度来看，这是一个大问题，至少如果您打算将您的页面呈现给任何欧盟公民(甚至，如果您无意中这样做)。对于位于美国(或欧盟以外任何国家)的公司来说，情况也是如此。
如果有人对为什么会这样感兴趣，我会在这里更新这个答案并给出更多细节，但现在，我不想浪费太多的空间。
话虽如此:
我按照两个非常简单的步骤下载了该字体的所有版本(常规，轮廓，圆形，锐利，双色)(这是@Aj334对他自己的问题的回答，让我走上了正确的轨道)(例如:“轮廓”变体):
Get the CSS from the Google CDN by directly letting your browser
fetch the CSS URL, i.e. copy the following URL into your browser's
location bar:
https://fonts.googleapis.com/css?family=Material+Icons+Outlined
This will return a page which looks like this (at least in Firefox 70.0.1 at the time of writing this):
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
Find the line starting with src: in the above code, and let your browser fetch the URL contained in that line, i.e. copy the following URL into your browser's location bar:
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
Now the browser will download that .woff2 file and offer to save it locally (at least, Firefox did).
最后两点说明:
当然，您可以使用相同的方法下载该字体的其他变体。在第一步中，只需将URL中的字符序列替换为字符序列Round(是的，真的，尽管在左侧导航菜单中它被称为“圆形”)，Sharp或Two+Tone。结果页面每次看起来几乎相同，但src:行的URL当然对每个变体都是不同的。
最后，在步骤1中，你甚至可以使用这个URL:
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
这将返回一个页面中所有变体的CSS，然后包含5行src:行，每一行都有另一个URL，指定各自的字体所在的位置。
