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

Question

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

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

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

Answer 1

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

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

记住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>

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

$ mdIcon服务文档

$ mdIconProvider服务文档

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指令中所述.例如:

<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的文件夹.总大小约为299KB

Answer 4

md-icons还没有在角度材料的凉亭中发布.我一直在使用Polymer的图标,无论如何它们可能都是相同的.

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/