如何使用新的 Material 设计图标主题：轮廓、圆角、双色调和尖锐？

Question

Google 改进了其 Material Design Icons，增加了 4 个新的预设主题：

除了常规的 Filled/Baseline 主题外，

轮廓、圆润、双色调和尖锐：

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

我已经 using it via Google Web Fonts 加入 link:

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

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

account_balance

但它始终显示 'Filled/Baseline' 版本。

我已尝试执行以下操作以改为使用 Outlined 主题：

account_balance_outlined account_balance

并且，将 Web 字体 link 更改为：

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

等但是没用。

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

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

Answer 1

新主题可能不是（现在？）Material 图标字体的一部分。 Link.

Answer 2

更新（31/03/2019）：所有图标主题现在都通过 Google Web 字体工作。

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

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

然后添加正确的class输出特定主题的图标。

<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 更改图标的颜色。

注意：双色主题图标目前有点小问题。

更新（14/11/2018）：16 个带有“_outline”后缀的大纲图标列表。

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

（在 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_大纲" 而不是大纲。

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

截至今天（2018 年 7 月 19 日），自推出新图标主题以来已经过去了 2 个多月，无法使用内联标签包含这些图标.

has pointed out that there's an issue raised on Github regarding the same: 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:

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

的样式表

第 2 步:

将以下 class 添加到您的 自己的 样式表中：

.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 步:

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

material-icons-new class
material 图标演示页面上显示的图标名称，以主题名称为前缀，后跟一个连字符。

前缀：

概述：outline-

四舍五入：round-

双音：twotone-

夏普：sharp-

例如（对于 'announcement' 图标）：

outline-announcement、round-announcement、twotone-announcement、sharp-announcement

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

更改图标大小：

由于这是背景图像而不是字体图标，请使用 CSS 的 height 和 width 属性修改图标的大小。在material-icons-newclass.

中默认设置为24px

示例：

案例 I: 对于 Outlined 主题的 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>

案例二：对于Sharp主题的评估图标：

包括样式表：

<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 确实是一个更好的选择，但在原型设计阶段和检查特定图标是否与之匹配时，字体图标可以节省时间您的设计等

如果 Google 提出不涉及下载图标以供使用的解决方案，我将更新此 post。

Answer 3

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

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

对比

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

Answer 4

我最终使用 IcoMoon 应用程序创建自定义字体，仅使用最近构建网络应用程序所需的新主题图标。它并不完美，但您可以通过一些设置很好地模仿现有的 Google 字体功能。这是一篇文章：

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

如果有人胆子大，他们可以使用 IcoMoon 转换整个主题。见鬼，IcoMoon 可能有一个内部流程可以使它变得简单，因为他们已经在他们的库中设置了原始 Material 图标。

无论如何，这不是一个完美的解决方案，但它对我有用。

Answer 5

直到知道 Google 还没有发布他们的新设计作为字体或 svg 图标集，我才感到满意。因此我整理了一个小的 npm 包来解决这个问题。

https://www.npmjs.com/package/ts-material-icons-svg

只需导入您想要使用的图标并将它们添加到您的注册表中。这也支持 tree shaking，因为只有那些你真正想要 and/or 需要的图标才会添加到你的项目中。

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

例如使用两个音调图标

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

在您的 html 模板中，您现在可以使用新图标

<mat-icon svgIcon="edit"></mat-icon>

Answer 6

截至 2019 年 2 月 27 日，新的 Material 图标主题有 CSS 种字体。

但是，您必须创建 CSS 类才能使用这些字体。

字体系列如下：

Material Icons Outlined - 轮廓图标
Material Icons Two Tone - 双色图标
Material Icons Round - 圆形图标
Material Icons Sharp - 尖锐的图标

示例请参见下面的代码示例：

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

或在Codepen

上查看

编辑：截至 2019 年 3 月 10 日，新字体图标现在似乎有类：

body {
  font-family: Roboto, sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

编辑 #2：这是使用 CSS image filters (code adapted from this comment 为双色图标着色的解决方法：

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

或在Codepen

上查看

Answer 7

有点好笑的是，Google 制作了一种在 Safari 中可以正常工作但在 Chrome 中不能正常工作的字体。这是 https://codepen.io/anon/pen/zbavza

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

参考并且无法使用 css 更改颜色。

Answer 8

网络字体 link 现在可以在所有浏览器中使用了！

只需将您的主题添加到由管道 (|) 分隔的字体 link 中，就像这样

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

然后引用 class，像这样：

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

Answer 9

Aj334 最近的修改非常完美。

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

Answer 10

如果您的 Web 项目中已经有 material-icons，只需更新 html 文件中的引用和使用的 class 图标：

html参考：

之前

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

之后

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

material 图标 class:

之后只需检查 class您使用的名称：

之前：

<i className="material-icons">weekend</i>

之后：

<i className="material-icons-outlined">weekend</i>

对我有用...Pura vida！

Answer 11

对于angular material，您应该使用 fontSet 输入来更改字体系列：

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

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

Answer 12

到目前为止的

None 个答案解释了如何下载该字体的各种变体，以便您可以从您自己的网站（WWW 服务器）提供它们。

虽然从技术角度来看这似乎是一个小问题，但从法律角度来看这是一个大问题，至少如果您打算向任何欧盟公民展示您的网页（或者甚至，如果您通过事故）。对于居住在美国（或欧盟以外的任何国家）的公司来说也是如此。

如果有人对这是为什么感兴趣，我将更新此答案并在此处提供更多详细信息，但目前，我不想浪费太多 space 题外话。

话虽如此：

我已经按照两个非常简单的步骤下载了该字体的所有版本（常规、轮廓、圆形、尖锐、双色调）（@Aj334 对他自己的问题的回答让我走上了正确的轨道）（示例："outlined" 变体）：

通过 直接让您的浏览器从 Google CDN 获取 CSS 获取 CSS URL，即将以下内容 URL 复制到浏览器的位置栏：

https://fonts.googleapis.com/css?family=Material+Icons+Outlined

这将 return 一个看起来像这样的页面（至少在撰写本文时在 Firefox 70.0.1 中）：

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

在上面的代码中找到以src:开头的行，然后让浏览器获取该行中包含的URL ，即复制以下 URL 到浏览器的地址栏：
```
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
```
现在浏览器将下载 .woff2 文件并提供将其保存在本地（至少 Firefox 这样做）。

最后两点：

当然，您可以使用相同的方法下载该字体的其他变体。第一步，只需将URL中的字符序列Outlined替换为字符序列Round（是的，确实如此，虽然here在中称为"Rounded"左侧导航菜单）、Sharp 或 Two+Tone。结果页面每次看起来几乎相同，但是 src: 行中的 URL 当然对于每个变体都是不同的。

最后，在第 1 步中，您甚至可以使用 URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

这将 return 一页中所有变体的 CSS，然后包含五行 src: 行，每一行与另一行 URL 指定相应字体的位置位于。

Answer 13

放入头部 link 到 google 样式

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

在正文中是这样的

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

Answer 14

设置双色：

如上所述，您可以使用 color css 键，但材料 Two-tone 主题似乎有问题；-)

在几个 angular material github issue's by using a custom css filter. This custom filter can be generated here.

之一中描述了解决方法

例如：

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

附件：

Answer 15

自 2020 年 5 月 12 日起，您需要

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>

注意：例如要使用轮廓样式，需要指定material-icons AND material-图标轮廓 类.

Answer 16

将下面的 link 添加到您的 header 标签！

注意；单独地，Material + Icons+Outlined 是一个 class 访问所有 classes，连接方法用于使用“|”将其他的连接在一起运算符

如何使用新的 Material 设计图标主题：轮廓、圆角、双色调和尖锐？

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

icons

material-design

google-material-icons