更新（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 个大纲图标的列表。
这是使用 _outline 后缀的 16 个大纲图标的最新列表，可与常规 Material-icons Webfont 一起使用（经过测试并确认）。
（在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_outlined”而不是outline。
这是一个使用内联标签测试新图标主题的技巧。这不是官方的解决方案。
截至今天（2018 年 7 月 19 日），距离新图标主题推出已有两个多月，无法使用内联标签 <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 属性来修改图标的大小。 material-icons-new 类中的默认设置为 24px。
示例：
案例一：对于account_circle图标的Outlined主题：
- 包括样式表：
<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 为这个问题提出不涉及下载图标以供使用的解决方案，我会更新这篇文章。