AngularJS Material 网页字体图标 (<md-icon>) 无法显示？

Question

我不确定是文档让我困惑了，还是我在使用md-icons时遇到了困难（比其他图标字体更麻烦）。 这里的指令 指定要使用<md-icon md-font-icon="classname" />.

这里有一个带有图标字体样式表加载和按照文件说明书的指示使用<md-icon md-font-icon="android" /> 的 演示 , 然而没有任何东西显示出来。 我做错了什么？

- Helen Che

Answer 1

我也尝试过让图标显示，最后做法如下：

在你的HTML头部添加以下内容：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

然后使用以下方法添加您的图标：

<i class="material-icons">android</i>

您也可以在 md-button 内使用它，如下所示：

<md-button class="md-icon-button" ng-click="someFunc()">
    <i class="material-icons">android</i>
</md-button>

- Ovi

---

如果有人在垂直对齐方面遇到问题，请查看以下链接：https://dev59.com/D10a5IYBdhLWcg3wNWXA#30849774 - Yannic Bürgmann

Answer 2

我刚刚也遇到了和你一样的问题，只能使用<i class="material-icons">android</i>，直到我发现我使用的是旧版本的angular material。

我使用了谷歌的CDN，但他们没有最新版本。你需要从angular material网站下载它（或使用npm更新）并链接到本地源代码。

现在我可以使用它了。

<md-icon md-font-set="material-icons">delete</md-icon>

- Stefan

---

谢谢，这对我帮助很大！入门指南仍然参考了0.9.4版本，这已经是几个版本之前的了。 - mwidmann

这应该是被接受的答案。当前被接受的答案会导致字体图标的对齐出现问题。 - Yannic Bürgmann

Answer 3

您只需使用：

<md-icon>android</md-icon>

就这些了，这是一个示例

- Andrei Kropotin

---

谢谢，有没有不使用CDN的方法？我通过npm导入angular material，看起来图标没有包含在仓库中。除了CDN，我似乎找不到官方来源。 - Helen Che

@VeraWang 是的，图标不包含在“Angular Material”存储库中，如果您想在本地托管它们，这里有说明。 - Andrei Kropotin

谢谢。文档告诉你使用<md-icon md-font-icon="android"</md-icon>，但显然是错误的。 - Paul LeBeau

Answer 4

编辑：这个答案是针对Angular而不是AngularJS的（原帖子说的是Angular）。为了让任何迷失方向的人能够找到，我将其保留。

由于其他答案都没有提到需要包含MdIconModule，因此我会提一下。很容易忘记。

<i class="material-icons">icon_name</i>只要按照https://google.github.io/material-design-icons/上的说明操作就可以使用。

为了让<md-icon>icon_name</md-icon>起作用，你还必须：

• 在你的AppModule中import { MdIconModule } from '@angular/material'
• 将MdIconModule列在你的AppModule的imports中

（或者创建一个单独的模块来处理加载Angular Material模块，如https://material.angular.io/guide/getting-started中所述）。

- Mikal Madsen

---

如果你正在为一个npm包创建自己的组件，这可能特别相关。 - Joshua Drake

非常感谢您，您是一个传奇。我已经在Material团队的板上创建了一个问题，希望文档得到更新。https://github.com/angular/material2/issues/6413 - cbros2008

Answer 5

如果您更喜欢使用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

- Nicholas Albion

Answer 6

使用Google字体的md-icons：

: <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">

- Mahesh K

Answer 7

要使用md-icons，我们需要在index.html中包含material icon样式。

<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>

- MGA

Answer 8

我使用了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>

另一个组件更新后，数字1图标消失了。而且只有数字2和3在按钮内对齐。

- Vadim