更新（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 个大纲图标的最新列表，使用_outline后缀（经过测试和确认）。
（在material-design-icons 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_概述”而不是轮廓。
这是一个使用内联标签测试新图标主题的技巧。这不是官方的解决方案。
到今天（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 步：
包括您要使用的主题的样式表。例如：对于“Outlined”主题，使用“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>标签来使用该图标：
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。
例子：
案例一：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 肯定是更好的选择，但字体图标在原型设计阶段和检查特定图标是否与您的设计相匹配等方面可以节省时间。
如果谷歌为这个问题提出了一个不涉及下载使用图标的解决方案，我会更新这篇文章。
