如何使用新的材料设计图标主题:轮廓，圆形，双色和尖锐?

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

当前回答

对我来说有用的是在图标名称后使用_outline而不是_outline。

<mat-icon>info</mat-icon>

<mat-icon>info_outline</mat-icon>

2018-07-27 16:01:06

其他回答

设置双色:

如上所述，你可以使用颜色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过滤器生成器

2020-03-23 20:29:45

把头部链接到谷歌样式

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

身体是这样的

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

2020-01-25 13:25:20

有点滑稽的是，谷歌制作了一种在Safari中正常工作但在Chrome中不正常的字体。这里是https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

参考https://stackoverflow.com/a/54902967/4740291，不能改变使用css的颜色。

2019-03-18 00:40:53

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>

2019-03-31 19:43:43

新的主题可能还不是Material Icons字体的一部分。链接。

2018-05-16 07:21:15

如何使用新的材料设计图标主题:轮廓，圆形，双色和尖锐?

推荐文章

最新文章

标签