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

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

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

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

我猜在传递给图标属性的路径参数上存在问题。我想知道这个图标文件夹实际上在哪里?

9个回答

153

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

md-icon指令中的icon属性给出的路径是您静态文件目录中某个.png或.svg文件的URL。因此,您必须在icon属性中放置该文件的正确路径。另外,请将文件放在正确的目录中,以便您的服务器能够提供它。注意,md-icon不像Bootstrap图标那样。目前,它们仅仅是一个显示.svg文件的指令。

更新

自这个问题发布以来,Angular Material Design已经发生了很大的变化。

现在有几种方法可以使用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指令文档

$mdIcon服务文档

$mdIconProvider服务文档


1
关于连字的快速提示:使用下划线代替连字符。这可能在您的详细信息链接中有记录,但是没有人有时间去查看。;-) - Olson.dev
什么是正确的着色方式? - theblang
如果您将它们用作字体图标,那么它们只是一种字体。因此,在CSS中设置文本颜色(例如{ color:red })将对它们进行着色。 - tanou
1
正是我所需要的。在使用<i class='material-icons'>icon_name</i>时,我一直苦恼于样式问题,但是md-font-library完美地解决了我的问题。 - Pieter VDE
非常感谢!我可能是漏掉了什么,或者Angular Material的文档极其糟糕。为什么他们不能展示这种非常直接的图标显示方式呢?不,它必须涉及到控制器、循环等等... 唉。 - Noah Krasser
显示剩余2条评论

32

现在最简单的方法是从Google Fonts请求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/


如何为按钮添加图标? - Alexander Mills

28

现在它从bower正常工作了。

bower install material-design-icons --save

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


20
那么如何使用它呢? - Ernst Robert

6

目前在bower发布的angular-material中还没有md-icons。我一直在使用Polymer的图标,它们可能是相同的。

bower install polymer/core-icons

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指定填充颜色:
<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

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

该网站提供了一组可用于Angular应用程序的Material设计图标。使用这些图标可以增强您的应用程序的外观和感觉。您可以根据需要定制这些图标,例如更改颜色、大小等。


2
很烦人的是,ng-md不能像md-icon那样将图标居中显示在图标按钮中。 - Mustafa
是的,这里也有相同的问题。大多数情况下,您将需要使用 CSS 来优化位置。首先,设定 position:relative;,然后通过 left-top-right-bottom 移动 SVG 元素或容器,以获得更好的位置。 - Asqan

3
在它们的最新版本中,有一个名为md-icon的指令。
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

4
安装 Material Design 图标,请使用命令 "bower install material-design-icons"。这些图标的资源可以在该 GitHub 地址中获得:https://github.com/google/material-design-icons - neofreko
5
下载它,不要使用 bower。它大小为57MB。 - neofreko

1

截至目前,所有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


OP正在使用AngularJS Material。 - Edric

0

0

通过使用类似的方式
使用 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;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接