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

Question

Google已经使用4个新预设主题修改了Material Design Icons：

概述，圆形，双色和夏普，以及常规填充/基线主题：

但不幸的是，它并没有在任何地方说出如何使用新主题。

我已经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 Fonts链接更改为：

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

等。但它没有用。

在黑暗中拍摄也没有意义。

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

提前致谢。

Answer 1

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

正如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进行更改。

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

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

这是最新的16个轮廓图标的列表，这些图标与常规的Material-icons Webfont一起使用，并带有 _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_ 概述 ”，而不是 outline 。

这是一种使用嵌入式标签测试新图标主题的技巧。这不是官方的解决方案。

截至今天（2018年7月19日），自引入新图标主题以来已有两个多月，没有办法使用嵌入式标签<i class="material-icons"></i>来包含这些图标。

+Martin指出，在Github上存在以下问题：https://github.com/google/material-design-icons/issues/773

因此，在Google提出解决方案之前，我已经开始使用黑客手段在我的开发环境中包含这些新的图标主题，然后再将相应的图标下载为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步：

通过向<i>标签添加以下类使用图标：

1）material-icons-new类

2）图标名称，如材料图标演示页面上所示，在主题名称前加上连字符。

前缀：

概述：outline-

四舍五入：round-

双音：twotone-

夏普：sharp-

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

outline-announcement，round-announcement，twotone-announcement，sharp-announcement

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

更改图标大小：

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

示例：

案例I：：对于 account_circle 图标的 Outlined 主题：

1）包括样式表：

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

2）在页面上添加图标标签：

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

可选（对于深色背景）：

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

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

1）包括样式表：

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

2）在页面上添加图标标签：

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

（用于深色背景）：

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

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

在进行站点速度优化时，确定将图标下载为SVG或PNG是一个更好的选择，但是在原型设计阶段检查字体图标会节省时间，并检查设计中是否包含特定图标等

如果Google针对此问题提出了不涉及下载图标以供使用的解决方案，我将对此帖子进行更新。

Answer 2

截至2019年2月27日，新的Material Icon主题有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（代码从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 3

从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-icons-outlined 类。 / p>

Answer 4

对于角形材质，应使用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 5

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

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

vs

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

Answer 6

新主题可能不是（还是？）Material Icons字体的一部分。 https://github.com/google/material-design-icons/issues/773

Answer 7

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 8

如果您的Web项目中已经有 material-icons ，则只需更新html文件中的引用以及所使用的图标类即可：

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

材质图标类：

之后，只需检查您正在使用的className：

之前：

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

之后：

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

对我有用...普拉维达！

Answer 9

到目前为止，没有一个答案说明如何下载该字体的各种变体，以便您可以从自己的网站（WWW服务器）上提供它们。

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

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

已这样说：

我已经按照两个非常简单的步骤下载了该字体的所有版本（常规，轮廓，圆角，锐利，双色调）（这是@ Aj334对他自己的问题的回答，使我处在正确的轨道上）（示例：“概述”变体）：

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

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

这将返回一个看起来像这样的页面（至少在编写本文时在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在左侧导航菜单中被称为“圆形”），分别为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

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

Answer 10

插入Google样式的头部链接

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

体内如此

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

Answer 11

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

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

如果有人感到胆怯，可以使用IcoMoon转换整个主题。地狱，IcoMoon可能有一个内部流程，这很容易，因为他们已经在其库中设置了原始材质图标。

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

Answer 12

我不满意，直到知道Google尚未发布其新设计的字体或svg图标集。因此，我整理了一个小的npm软件包来解决该问题。

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

只需导入要使用的图标，然后将其添加到注册表中。由于仅将那些您真正想要和/或需要的图标添加到您的项目中，因此这也支持摇树。

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 13

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

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

参考https://stackoverflow.com/a/54902967/4740291，并且无法使用CSS更改颜色。

Answer 14

webfonts链接现在可以在所有浏览器中使用！

只需将主题添加到由竖线（|）分隔的字体链接中，就像这样

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

然后像这样引用该类：

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

设置双色调颜色：

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

使用自定义css过滤器在几种有角材料github issue中描述了一种解决方法。可以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%);
}

附件：

如何使用新的Material Design Icon主题：概述，圆形，双色和夏普？

15 个答案:

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

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

这是一种使用嵌入式标签测试新图标主题的技巧。这不是官方的解决方案。

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

google CDN

图标元素

webfonts链接现在可以在所有浏览器中使用！