如何在角材中使用<md-icon>？

Question

我想知道如何使用材质的图标，这是行不通的：

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-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图标集应用程序。

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

MD-图标不在角材料的亭子释放尚未。我一直在使用Polymer's icons，他们可能会一样。

bower install polymer/core-icons 

Answer 3

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

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

Answer 4

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

它实际上从亭子现在的作品。

bower install material-design-icons --save 

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

Answer 6

简单的方法： 使用以下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']); 

使用NG-MD-图标指示在html，通过css指定填充颜色：

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

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

Answer 7

最简单的方法今天是简单地要求从谷歌字体材质图标字体，例如在你的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 8

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

Answer 9

所有md-前缀现在mat-前缀为写这篇文章的时间！我们的模块中

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

导入：在你的代码

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

用途：

在你的HTML头将这个

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

下面是最新的文档：

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