AngularJS Material web字体图标（ <md-icon> ）没有出现？

Question

不确定是否是令我困惑的文档，但我很难让md-icons工作（它比其他图标字体更多的工作）。 这里的说明指定使用<md-icon md-font-icon="classname" /> 。

下面是一个加载了图标字体样式表的示例演示和一个<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按钮内使用它，如下所示：

<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>直到我发现我有一个较旧版本的角度材料。

我使用谷歌的CDN，但他们没有最新的版本。 您需要从角度材料站点下载它（或使用npm更新）并链接到本地​​源代码。

现在我可以用它了

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

Answer 3

你可以使用：

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

这就是全部，这是一个例子

Answer 4

编辑：这个答案适用于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和
• 清单MdIconModule您之间AppModule的imports

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

Answer 5

使用谷歌字体的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 6

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

Answer 7

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

要使用md-icons我们必须在index.html中包含材质图标样式

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

然后开始使用带有任何有效html元素<md-icon>或使用<md-icon> ，只是为了确保class="material-icons是使得这个class="material-icons成为可能和重要的原因。

<md-icon class="material-icons">delete</md-icon>
<i class="material-icons">delete</i>
<span class="material-icons">delete</span>