如何使用新的材料设计图标主题：轮廓，圆角，双色调和锐利？

Question

谷歌用4个新的预设主题对其材质设计图标进行了改造：

轮廓、圆角、双色和尖锐，除了常规填充/基线主题：

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

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

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

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

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

等，但它不起作用。

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

有没有人尝试使用新的主题？它甚至能像基线版本（内联html标记）一样工作吗？或者，它仅仅意味着以SVG或PNG格式下载？

Answer 1

正如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来改变。

注意：双色调的主题图标目前有点小毛病。

下面是16个outline图标的最新列表，它们使用_outline后缀（经过测试和确认）与常规的Material-icons Webfont一起工作。

（在github的“材料-设计-图标”页面上找到。搜索：“_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_lighted”，而不是outline。

截至今天（2018年7月19日），新的图标主题推出已有2个多月，无法使用内联标记包含这些图标。

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

这些文件中的每一个都包含作为背景图像(Base64Image-Data)包含的相应主题的图标。下面是我们如何使用它来测试设计中特定图标的兼容性，然后再将其下载到生产环境中使用。

步骤1：

包括要使用的主题的样式表。例如：对于“概述”主题，使用“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);
}

第三步：

通过向标记添加以下类来使用图标：

>

材质-图标-新建类

图标名称显示在材料图标演示页上，前缀为主题名称，后跟一个连字符。

前缀：

大纲:大纲-

舍入:舍入-

双音:双音-

夏普:夏普-

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

大纲公告,轮公告,双音公告,尖锐公告

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

更改图标大小：

由于这是背景图像而不是字体图标，请使用CSS的高度和宽度属性修改图标的大小。在Material-Icons-New类中，默认值设置为24px。

示例：

案例一：对于account_circle图标的概述主题：

1. 包括样式表:

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

案例二：对于考核图标的尖锐主题：

1. 包括样式表:

<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当然是一个更好的选择，但是当涉及到原型阶段和检查特定图标是否符合您的设计等时，字体图标是一个节省时间的方法。

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