如何在 Angular Material 中使用 ？

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

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

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

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

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

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

Update

自从这个问题发布以来，角度材料设计已经发生了很大的变化。

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

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

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

Example:

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

or

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

:where getMyIcon是一个定义在$scope.

or <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 指令文档 https://material.angularjs.org/latest/api/directive/mdIcon

$mdIcon服务文档 https://material.angularjs.org/latest/api/service/%24mdIcon

$mdIconProvider 服务文档 https://material.angularjs.org/latest/api/service/%24mdIconProvider