不确定是不是文档让我感到困惑，但我很难让md-icons 工作（它比其他图标字体工作更多）。说明here 指定使用<md-icon md-font-icon="classname" />。
这里是一个示例demo，根据文档的说明加载了图标字体样式表和<md-icon md-font-icon="android" />，但是没有显示任何内容。我做错了什么？
【问题讨论】：
标签： css angularjs google-webfonts
我也很难让图标也显示出来，所以这就是我最终要做的：
在你的html头部添加以下内容
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
然后使用以下命令添加您的图标：
<i class="material-icons">android</i>
您也可以在 md 按钮中使用它，如下所示：
<md-button class="md-icon-button" ng-click="someFunc()">
<i class="material-icons">android</i>
</md-button>
【讨论】：
我刚刚遇到了和你一样的问题，只能将它与<i class="material-icons">android</i> 一起使用，直到我发现我有一个旧版本的角材料。
我使用了谷歌的 CDN，但他们没有最新版本。 您需要从 angular material 站点下载（或使用 npm 更新）并链接到本地源代码。
现在我可以用它了
<md-icon md-font-set="material-icons">delete</md-icon>
【讨论】：
【讨论】：
<md-icon md-font-icon="android"</md-icon>，但显然这是错误的。
编辑：此答案适用于 Angular，而不是 AngularJS（最初说 Angular）。留给任何迷路的人。
由于没有其他答案提到您需要包含MdIconModule，我会的。容易忘记。
只要遵循https://google.github.io/material-design-icons/ 上的说明，<i class="material-icons">icon_name</i> 就可以工作。
要让<md-icon>icon_name</md-icon> 工作，您还必须
import { MdIconModule } from '@angular/material' 进入你的 AppModule 和 AppModule 的imports 中列出MdIconModule
（或创建一个单独的模块来处理 Angular Material 模块的加载，如 https://material.angular.io/guide/getting-started 中所述）。
【讨论】：
如果您更喜欢使用 CSS 类名而不是连字（因为您不希望屏幕阅读器读出图标的名称），您似乎需要添加自己的 CSS：
.material-icons {
// This bit is included when you import
// https://fonts.googleapis.com/icon?family=Material+Icons
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
// ...but you need to add your own CSS class names for the icons you want to use:
&.arrow-backward::before {
content: '\e5c4';
}
&.arrow-forward::before {
content: '\e5c8';
}
...
}
那么你可以这样使用它：
<md-button>
Next
<i class="material-icons right arrow-forward"></i>
</md-button>
图标代码的完整列表：https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
【讨论】：
在谷歌字体中使用 md 图标：
：<md-icon md-font-set="material-icons"> android </md-icon>
依赖关系
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://material.angularjs.org/latest/angular-material.min.css" rel="stylesheet">
【讨论】：
我使用了 4 种方法，其中 3 种在本页中提到：
<md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
<ng-md-icon icon="perm_identity"></ng-md-icon>
</md-button>
<md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
<md-icon md-font-set="material-icons">perm_identity</md-icon>
</md-button>
<md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
<md-icon>perm_identity</md-icon>
</md-button>
<md-button class="md-icon-button" ng-click="toggleSidenav('right')" flex=5 aria-label="User">
<i class="material-icons">perm_identity</i>
</md-button>
【讨论】：
要使用md-icons，我们必须在 index.html 中包含材质图标样式
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
然后开始使用带有任何有效 html 元素或 <md-icon> 的图标，以确保 class="material-icons 是使这成为可能并且获得图标的重要因素。
<md-icon class="material-icons">delete</md-icon>
<i class="material-icons">delete</i>
<span class="material-icons">delete</span>
【讨论】：