谷歌修改了它的材质设计图标，有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格式下载吗?
对于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>
这对我很有用……对于维达!
截至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类。
设置双色:
如上所述，你可以使用颜色css键，除了材质双色调主题，这似乎是故障;-)
在github的几个角材料问题之一描述了一个解决方案，使用自定义css过滤器。这个自定义过滤器可以在这里生成。
例如:
Html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">
<i class="material-icons-two-tone red">home</i>
css:
.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}
附件:
Working Angular Stackblitz
Codepen例子
代码依赖CSS过滤器生成器
