如何使用新的 Material Design Icon 主题：轮廓、圆角、双色调和锐利？

如何解决如何使用新的 Material Design Icon 主题：轮廓、圆角、双色调和锐利？

更新（2019 年 3 月 31 日）：所有图标主题现在都可以通过 Google 网络字体工作。

正如 Edric 所指出的，现在只需在文档头部添加 google 网络字体链接，如下所示：

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

图标的颜色也可以使用 CSS 进行更改。

注意：目前双音主题图标有点小故障。

更新（2018 年 11 月 14 日）：使用“_outline”后缀的 16 个大纲图标的列表。

这是与常规 Material-icons Webfont 一起使用的 16 个大纲图标的最新列表，使用后缀（经过测试和确认）。

（在material-design-icons github页面上找到。搜索：“ ”）

<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_Box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>

请注意， pie_chart 需要是“ pie_chart ”而不是 _轮廓 。

这是一个使用内联标签测试新图标主题的技巧。这不是官方的解决方案。

截至今天（2018 年 7 月 19 日），距离新图标主题推出已有 2 个多月，使用内联标签包含这些图标<i class="material-icons"></i>。

+Martin指出在 Github 上提出了同样的问题：https ://github.com/google/material-design- icons/issues/773

因此，在 Google 提出解决方案之前，我已经开始使用 hack 将这些新图标主题包含在我的，然后再将适当的图标下载为 SVG 或 PNG。我想我会与大家分享。

：不要在生产环境中使用它，因为每个包含的来自 Google 的 CSS 文件的大小都超过 1MB。

Google 使用这些样式表在其演示页面上展示图标：

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

这些文件中的每一个都包含作为背景图像（Base64 图像数据）包含的各个主题的图标。下面是我们如何使用它来测试我们设计中特定图标的兼容性，然后再下载它以用于生产环境。

：

包括您要使用的主题的样式表。例如：对于“Outlined”主题，使用“outline.css”的样式表

：

将以下类添加到您样式表中：

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

：

通过将以下添加到<i>标签来使用该图标：

material-icons-new班级
图标名称如材料图标演示页面所示，以主题名称为前缀，后跟连字符。

前缀：

概述：outline-

圆形：round-

双色：twotone-

锋利的：sharp-

例如（对于“公告”图标）：

outline-announcement, round-announcement, twotone-announcement,sharp- announcement

3）使用可选的第三类icon-white将颜色从黑色反转为白色（用于深色背景）

由于这是背景图像而不是字体图标，请使用 CSS 的height和width属性来修改图标的大小。类中默认设置为 24px material- icons-new。

包括样式表：

href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
在您的页面上添加图标标签：

可选（对于深色背景）：

<i class="material-icons-new outline-account_circle icon-white"></i>

包括样式表：

href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
在您的页面上添加图标标签：

（对于深色背景）：

<i class="material-icons-new sharp-assessment icon-white"></i>

我怎么强调都不过分，这不是在生产环境中包含图标的正确方法。但是，如果您必须浏览开发页面上的多个图标，它确实使图标包含变得非常容易并且节省了大量时间。

在网站速度优化方面，将图标下载为 SVG 或 PNG 肯定是更好的选择，但字体图标在原型设计阶段和检查特定图标是否与您的设计相匹配等方面可以节省时间。

解决方法

谷歌已经用 4 个新的预设主题修改了它的Material Design
图标：

*除了常规的 *填充/基线主题外 ，轮廓、圆角、双色调和锐利：

但是，不幸的是，它没有说明如何使用新主题。

我一直在通过 Google Web Fonts 使用它，包括以下链接：

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

然后按照文档中的建议使用所需的图标：

<i class="material-icons">account_balance</i>

但它总是显示“填充/基线”版本。

我尝试执行以下操作来使用 Outlined 主题：

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

等等，但它不起作用。

像这样在黑暗中拍摄是没有意义的。

tl;dr：有没有人尝试过使用新主题？它甚至像基线版本（内联 html 标记）一样工作吗？或者，它是否只打算以 SVG 或 PNG 格式下载？