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

Posted 2023-03-06

【中文标题】AngularJS Material web 字体图标（<md-icon>）没有出现？

【英文标题】：AngularJS Material web font icons (<md-icon>) not showing up?

【发布时间】：2015-08-15 21:46:58

【问题描述】：

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

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

【参考方案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>

【讨论】：

如果有人在垂直对齐方面遇到问题，请查看：***.com/a/30849774/2576531

【参考方案2】：

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

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

现在我可以用它了

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

【讨论】：

谢谢，这对我帮助很大！入门指南仍然是 0.9.4 版本，这是几个旧版本。

这应该是公认的答案。当前接受的答案会导致字体图标的对齐出现问题。

【参考方案3】：

你可以使用：

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

就是这样，这里是example

【讨论】：

谢谢，有没有不用CDN的方法？我正在通过 npm 导入角度材料，看起来这些图标不包含在 repo 中。我似乎也找不到官方来源（除了 CDN）。

@VeraWang 是的，'Angular Material' repo 中不包含图标，如果你想在本地托管它们，here is instruction。

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

【参考方案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 和 在您的AppModule 的imports 中列出MdIconModule

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

【讨论】：

如果您为 npm 包创建自己的组件，则可能特别相关。

非常感谢，你是个传奇。我在材料团队板上创建了一个问题，因此希望文档得到更新。 github.com/angular/material2/issues/6413

【参考方案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

【参考方案6】：

在谷歌字体中使用 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">

【参考方案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 在按钮内对齐。

【参考方案8】：

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