Question

我想知道如何使用Material的图标，因为这不起作用：

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>

我想作为icon属性的参数给出的路径存在问题。我想知道这个图标文件夹到底在哪里？

Answer 1

由于其他答案没有解决我的问题，我决定写下自己的答案。

md-icon指令的icon属性中给出的路径是位于静态文件目录中某处的.png或.svg文件的URL。因此，您必须将该文件的正确路径放在icon属性中。 p.s将文件放在正确的目录中，以便服务器可以为其提供服务。

记住md-icon与引导图标不同。目前它们只是一个显示.svg文件的指令。

<强>更新

自问题发布以来，角度材料设计发生了很大变化。

现在有几种方法可以使用md-icon

第一种方法是使用SVG图标。

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

示例：

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

或

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

：其中getMyIcon是$scope中定义的方法。

或 <md-icon md-svg-icon="social:android"></md-icon>

要使用此功能，您必须使用$mdIconProvider服务来使用svg iconsets配置您的应用程序。

angular.module('appSvgIconSets', ['ngMaterial'])  
  .controller('DemoCtrl', function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);    
  });

第二种方法是使用字体图标。

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

在执行此操作之前，您必须像这样加载字体库..

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

或使用带有连字的字体图标

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

有关详细信息，请查看我们的

Angular Material mdIcon Directive documentation

$mdIcon Service Documentation

$mdIconProvider Service Documentation

Answer 2

今天最简单的方法是简单地从Google字体中请求Material Icons字体，例如在HTML标头标记中：

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

或在样式表中：

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

然后使用带有连字的字体图标，如md-icon directive中所述。例如：

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

图标/连字的完整列表位于https://www.google.com/design/icons/

Answer 3

它实际上现在可以从凉亭工作。

bower install material-design-icons --save

下载37.1 KB。然后它提取并安装。您将在bower_components文件夹中看到名为material-design-icons的文件夹。总大小约为299KBs

Answer 4

md-icons尚未出现在角度材料的凉亭中。我一直在使用Polymer's icons，无论如何它们可能都是一样的。

bower install polymer/core-icons

Answer 5

简单方法：使用以下CDN：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>

将ngMdIcons注入angularjs应用程序：

angular.module('demoapp', ['ngMdIcons']);

在html中使用ng-md-icon指令，通过css指定fill-color：

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>

来源：https://klarsys.github.io/angular-material-icons/

Answer 6

在他们的最新版本中，有一个名为md-icon

的指令

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Answer 7

截至撰写本文时，所有md-前缀现为mat-前缀！

把它放在你的html头中：

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

在我们的模块中导入：

import { MatIconModule } from '@angular/material';

在您的代码中使用：

<mat-icon>face</mat-icon>

以下是最新文档：

https://material.angular.io/components/icon/overview

Answer 8

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

源： https://material.angularjs.org/#/demo/material.components.button

Answer 9

使用喜欢的使用css和字体相同的位置

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

如何在Angular Material中使用<md-icon>？</md-icon>

9 个答案: