更新（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）：带有16个轮廓图标的列表，这些图标可使用“ _outline”后缀。
这是使用_outline后缀（经过测试和确认）的，与常规Material-icons Webfont一起使用的16个轮廓图标的最新列表。
（如在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日），自引入新图标主题以来仅两个多月，尚无办法使用内嵌标签包含这些图标<i class="material-icons"></i>。
+马丁指出，在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）使用可选的3rd类icon-white将颜色从黑色转换为白色（用于深色背景）
更改图标大小：
由于这是背景图片，而不是字体图标，因此请使用CSS 的heightand width属性修改图标的大小。在material-icons-new类中，默认设置为24px 。
例：
案例I：对于account_circle图标的大纲主题：
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>
案例二：对于评估图标的“ 鲜明主题” ：
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提出了解决此问题的解决方案，而该解决方案不涉及下载使用图标，那么我将更新此帖子。
