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

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

提问by Helen Che

Not sure if it's the documentation that's confusing me but I'm having difficulties getting md-iconsto work (its more work than other icon fonts). Instructions herespecify to Use <md-icon md-font-icon="classname" />.

不确定是否是文档让我感到困惑，但我在md-icons开始工作时遇到了困难（它比其他图标字体更工作）。说明这里指定使用<md-icon md-font-icon="classname" />。

Here is a sample demowith the icon font stylesheet loaded and a <md-icon md-font-icon="android" />as per the documentation's instructions, nothing is showing up however. What am I doing wrong?

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

回答by Ovi

I also struggle trying to get the icons to show as well, so here is what I ended up doing:

我也很难让图标也显示出来，所以这是我最终做的：

Add to the head of your html the following

将以下内容添加到 html 的头部

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

then add your icon using the following:

然后使用以下内容添加您的图标：

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

you could also use it inside an md-button as follows:

您也可以在 md 按钮中使用它，如下所示：

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

回答by Stefan

I just had the same problem as you and could only use it with <i class="material-icons">android</i>until i figured out i had an older version of angular material.

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

I used the CDN of google but they didn't have the newest version. You need to download it from the angular material site (or update with npm) and link to the local source code.

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

now i can use it with

现在我可以使用它

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

回答by Andrei Kropotin

You can just use:

你可以只使用：

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

that's all, here is example

就是这样，这是示例

回答by Mikal Madsen

Edit: This answer is for Angular, not AngularJS (post originally said Angular). Leaving this up for anyone lost.

编辑：这个答案是针对 Angular，而不是针对 AngularJS（帖子最初说的是 Angular）。把这个留给任何失去的人。

Since none of the other answers mention that you need to include the MdIconModule, I will. Easy to forget.

由于其他答案都没有提到您需要包含MdIconModule，我会的。容易忘记。

<i class="material-icons">icon_name</i>will work as long as the instructions on https://google.github.io/material-design-icons/are followed.

<i class="material-icons">icon_name</i>只要遵循https://google.github.io/material-design-icons/上的说明就可以工作。

To get <md-icon>icon_name</md-icon>to work, you must also

为了<md-icon>icon_name</md-icon>上班，你还必须

• import { MdIconModule } from '@angular/material'into your AppModuleand
• list MdIconModuleamong your AppModule's imports

• import { MdIconModule } from '@angular/material'进入你的AppModule和
• 列出MdIconModule你AppModule的imports

(or create a separate module to handle loading of Angular Material modules, as described on https://material.angular.io/guide/getting-started).

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

回答by Mahesh K

Usage of md-icons with google fonts:

使用带有谷歌字体的 md-icons：

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

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

Dependencies

依赖关系

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

回答by Nicholas Albion

If you'd prefer to use CSS class names instead of ligatures (because you don't want screen readers to read out the name of the icon) it seems that you need to add your own CSS:

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

Then you can use it like so:

然后你可以像这样使用它：

<md-button>
   Next
   <i class="material-icons right arrow-forward"></i>
</md-button>

For a full list of icon codes: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

有关图标代码的完整列表：https: //github.com/google/material-design-icons/blob/master/iconfont/codepoints

回答by Vadim

I used 4 approaches, 3 of them mentioned on this page:

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

Number 1 icon disappears on another component update. And only number 2 & 3 aligned identically within the button.

1 号图标在另一个组件更新时消失。并且只有数字 2 和 3 在按钮内完全对齐。

回答by MGA

To use md-iconswe'll have to include the material icon style in index.html

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

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

then start using icons with any valid html element or with <md-icon>, just to be sure class="material-iconsis what making this possible and important to get the icons.

然后开始使用带有任何有效 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>