更新(2019年3月31日):现在所有图标主题都通过谷歌Web字体工作。
正如Edric所指出的，这只是在你的文档头部添加谷歌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个大纲图标的列表。
下面是最新的16个与常规材质图标Webfont一起使用的大纲图标列表，使用_outline后缀(经过测试和确认)。
(可以在github的material-design-icons页面上找到。搜索:"_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_outlines”而不是outline。
这是一个黑客测试使用内联标签的新图标主题。这不是官方的解决方案。
截至今天(2018年7月19日)，自新的图标主题引入2个多月以来，没有办法使用内联标签<i class="material-icons"></i>来包含这些图标。
+马丁指出，Github上也有一个问题:https://github.com/google/material-design-icons/issues/773
所以，直到谷歌提出了一个解决方案，我已经开始使用黑客包括这些新的图标主题在我的开发环境下载适当的图标作为SVG或PNG。我想和大家分享一下。
重要提示:不要在生产环境中使用此选项，因为从谷歌中包含的每个CSS文件大小都超过1MB。
谷歌使用这些样式表来展示他们的演示页面上的图标:
大纲:
<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">
每个文件都包含各自主题的图标作为background-images (Base64 image-data)。下面是我们如何在下载到生产环境中使用之前，使用它来测试我们设计中特定图标的兼容性。
步骤1:
包括要使用的主题的样式表。
对于'outline '主题，使用'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类
图标名称显示在材质图标演示页面上，前缀为主题名称，后面跟着一个连字符。
前缀:
概述:大纲-
圆形:轮-
深浅不一的:twotone -
夏普:锋利的-
Eg(表示“公告”图标):
提纲式通告，圆形通告，双音式通告，尖音式通告
3)使用可选的第三类图标-白色将颜色从黑色颠倒为白色(用于深色背景)
改变图标大小:
因为这是一个背景图像而不是一个字体图标，所以使用CSS的height和width属性来修改图标的大小。在material-icons-new类中，默认设置为24px。
例子:
情况一:对于account_circle图标的outline Theme:
包括样式表:
<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格式的图标当然是更好的选择，但字体图标在原型设计阶段和检查特定图标是否与你的设计一致时，可以节省时间。
我将更新这篇文章，如果谷歌提出了一个解决这个问题的解决方案，不涉及下载图标使用。
