谷歌修改了它的材质设计图标，有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格式下载吗?
到目前为止，没有一个答案解释如何下载该字体的各种变体，以便您可以从自己的网站(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，指定各自的字体所在的位置。
对于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
如果你已经在你的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>
这对我很有用……对于维达!
