如何使用< md-icon>在角材料中? [英] How to use <md-icon> in Angular Material?

问题描述

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

I was wondering how to use Material's icons, as this is not working:

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

我猜想作为图标属性的参数给出的路径有问题.我想知道这个图标文件夹实际上在哪里吗?

I guess there is a problem with the path given as parameter to the the icon attribute. I would like to know where this icon folder actually is?

推荐答案

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

As the other answers didn't address my concern I decided to write my own answer.

在md-icon指令的icon属性中给出的路径是位于您的静态文件目录中某个位置的.png或.svg文件的URL.因此，您必须在icon属性中放置该文件的正确路径. p.s将文件放在正确的目录中，以便您的服务器可以使用它.

The path given in the icon attribute of the md-icon directive is the URL of a .png or .svg file lying somewhere in your static file directory. So you have to put the right path of that file in the icon attribute. p.s put the file in the right directory so that your server could serve it.

记住md-icon与引导图标不一样.当前，它们只是显示.svg文件的指令.

Remember md-icon is not like bootstrap icons. Currently they are merely a directive that shows a .svg file.

更新

自该问题发布以来，角材料设计发生了很大变化.

Angular material design has changed a lot since this question was posted.

现在有几种使用md-icon

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

The first way is to use SVG icons.

<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中定义的方法.

:where getMyIcon is a method defined in $scope.

或 <md-icon md-svg-icon="social:android"></md-icon>

要使用此功能，您必须访问$mdIconProvider服务，才能使用svg图标集配置应用程序.

to use this you have to the $mdIconProvider service to configure your application with 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);    
  });

第二种方法是使用字体图标.

The second way is to use font icons.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

在执行此操作之前，您必须像这样加载字体库.

prior to doing this you have to load the font library like this..

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

或使用带有连字的字体图标

or use font icons with ligatures

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

有关更多详细信息，请查看我们的

For further details check our

Angular Material mdIcon指令文档

$ mdIcon服务文档

$ mdIconProvider服务文档

这篇关于如何使用< md-icon>在角材料中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！