如何在angular度材质中使用<md-icon>

我想知道如何使用材料的图标,因为这是行不通的:

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

我想这是作为参数给出的图标属性的path有问题。 我想知道这个图标文件夹实际上在哪里?

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

md-icon指令的icon属性中给出的path是位于静态文件目录中的.png或.svg文件的URL。 所以你必须把该文件的正确path放在icon属性中。 ps把文件放在正确的目录下,这样你的服务器就可以提供服务了。

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

更新

自从这个问题发布后,angular度的材料devise已经发生了很大的变化。

现在有几种方法可以使用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 iconset来configuration您的应用程序。

 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指令文档

$ mdIcon服务文档

$ mdIconProvider服务文档

现在最简单的方法是简单地从Google Fonts请求材质图标字体,例如在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指令中所述 。 例如:

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

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

它现在从凉亭现在工作。

 bower install material-design-icons --save 

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

md图标不在angular材料的凉亭版本中。 我一直在使用聚合物的图标 ,他们可能会一样。

 bower install polymer/core-icons 

简单的方法:使用下面的CDN:

 <script src="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指定填充颜色:

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

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

在他们的最新版本中有一个叫做md-icon的指令

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

现在所有的md-前缀现在都是md-前缀了!

把这个放在你的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

 <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

通过使用像
使用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; }