Question

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

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

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>

全部，这里是example

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：

：Welcome = Label(Window,"Welcome to Dragive") File "/usr/lib/python2.7/lib-tk/Tkinter.py", line 2595, in __init__ Widget.__init__(self, master, 'label', cnf, kw) File "/usr/lib/python2.7/lib-tk/Tkinter.py", line 2089, in __init__ for k in cnf.keys(): AttributeError: 'str' object has no attribute 'keys'

依赖关系

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

Answer 6

如果您更喜欢使用CSS类名而不是连字（因为您不希望屏幕阅读器读出图标的名称），您似乎需要添加自己的CSS：

-65536

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

.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';
  }
  ...
}

有关图标代码的完整列表：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>

第一个图标在另一个组件更新时消失。只有2号和2号3在按钮内对齐相同。

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

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

8 个答案: