谷歌修改了它的材质设计图标,有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格式下载吗?


当前回答

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

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

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

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

其他回答

把头部链接到谷歌样式

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

身体是这样的

<i class="material-icons-outlined">bookmarks</i>

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

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

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

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

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>

Aj334最近的编辑工作完美。

谷歌CDN

<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">

图标元素

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</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类。