AngularJS Material 网络字体图标 (<md-icon>) 没有显示？

Question

不确定是否是文档让我感到困惑，但我很难让 md-icons 正常工作（它比其他图标字体更有效）。说明 here 指定使用 <md-icon md-font-icon="classname" />.

这里是一个 demo 示例，其中加载了图标字体样式表和 <md-icon md-font-icon="android" /> 按照文档的说明，但是没有显示任何内容。我做错了什么？

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>

Answer 2

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

我用的是google的CDN，但是他们没有最新的版本。您需要从 angular material 站点下载它（或使用 npm 更新）并 link 到本地源代码。

现在我可以使用它了

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

Answer 3

您可以只使用：

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

就这些了，这里是example

Answer 4

使用 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">

Answer 5

如果您更喜欢使用 CSS class 名称而不是连字（因为您不希望屏幕阅读器读出图标的名称），您似乎需要添加您自己的 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

Answer 6

我使用了 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 在按钮内对齐。

Answer 7

编辑：这个答案是针对 Angular，而不是 AngularJS（post 最初是说 Angular）。把这个留给迷路的人。

因为 none 的其他答案提到您需要包括 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 中所述）。

Answer 8

要使用 md-icons，我们必须在 index.html

中包含 material 图标样式

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

AngularJS Material 网络字体图标 (<md-icon>) 没有显示？

AngularJS Material web font icons (<md-icon>) not showing up?

css

google-webfonts

angularjs