更新（2019年3月31日）：现在所有图标主题都可以通过Google Web字体使用。
正如Edric指出的那样，现在只需要在文档头中添加Google Web字体链接即可，如下所示：
<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_outlined" 而不是
outline。
这是一个使用内联标签测试新图标主题的 Hack。这不是官方解决方案。
截至今天（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">
Sharp：
<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);
}
第三步:
将以下类添加到<i>标签中使用图标:
material-icons-new 类
图标名称，前缀为主题名称后跟连字符，在Material Icons演示页面上显示。
前缀:
Outlined: outline-
Rounded: round-
Two-Tone: twotone-
Sharp: sharp-
例如（对于“announcement”图标）:
outline-announcement, round-announcement, twotone-announcement, sharp-announcement
3) 可选的第三个类别icon-white可用于反转颜色，使其从黑色变为白色（用于深色背景）
更改图标大小:
由于这是一个背景图片而不是字体图标，因此使用CSS的height和width属性修改图标的大小。默认设置为24px在material-icons-new类中。
例子:
情况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>
案例 II：针对评估图标的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格式对于网站速度优化来说肯定是更好的选择，但是当涉及到原型设计阶段以及检查特定图标是否符合您的设计等方面时，字体图标可以节约时间。
如果谷歌提供了一个不需要下载图标进行使用的解决方案，我会更新此帖子。
