icons - 如何使用新的 Material Design Icon 主题 : Outlined, Rounded、Two-Tone 和 Sharp？

Question

谷歌改进了它的 Material Design Icons带有 4 个新的预设主题:
轮廓、圆角、双色调和锐利 , 除了常规的 填充/基线主题:

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

我已经using it via Google Web Fonts通过包含链接:

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

然后使用所需的图标 as suggested in the documentation :

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

但它始终显示“已填充/基线”版本。

我尝试执行以下操作以使用 概述 主题代替:

<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 格式？

Answer 1

更新 (31/03/2019):所有图标主题现在都可以通过 Google Web Fonts 工作。
正如 Edric 所指出的，现在只需在文档的头部添加 google web fonts 链接，如下所示:

<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 page 上找到的。搜索:“ _outline_24px.svg ”)

<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 图像数据)包含的各个主题的图标。下面是我们如何使用它来测试我们设计中特定图标的兼容性，然后再下载它以用于生产环境。

第 1 步 :
包括您要使用的主题的样式表。
例如:对于“大纲”主题，使用“outline.css”的样式表
第 2 步 :
将以下类添加到您的 自己的 样式表:

.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);
}

第 3 步 :
通过添加以下内容来使用图标 类(class) 到 <i>标签:

material-icons-new类(class)

Material 图标演示页面上显示的图标名称，以主题名称为前缀，后跟连字符。

前缀:
概述: outline-圆形: round-二音: twotone-夏普: sharp-例如(对于“公告”图标): outline-announcement , round-announcement , twotone-announcement , sharp-announcement3) 使用可选的第三类 icon-white用于将颜色从黑色反转为白色(对于深色背景)

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

示例:
案例一:对于 概述 主题account_circle 图标:

包括样式表:

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

在您的页面上添加图标标签:

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

可选(对于深色背景):

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

案例二:对于 夏普 主题评估图标:

包括样式表:

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

在您的页面上添加图标标签:

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

(对于深色背景):

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

我再怎么强调也不为过，这不是在您的生产环境中包含图标的正确方法。但是，如果您必须浏览正在开发的页面上的多个图标，它确实使图标包含变得非常容易并节省了大量时间。
在网站速度优化方面，将图标下载为 SVG 或 PNG 肯定是一个更好的选择，但是在原型(prototype)设计阶段和检查特定图标是否符合您的设计等方面，字体图标可以节省时间。

如果谷歌为这个问题提出了一个不涉及下载图标以供使用的解决方案，我会更新这篇文章。