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

Posted 2023-02-21

【中文标题】如何在 Angular Material 中使用 <md-icon>？

【英文标题】：How to use <md-icon> in Angular Material?

【发布时间】：2014-11-29 07:29:23

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

更新

自发布此问题以来，Angular 材料设计发生了很大变化。

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

【讨论】：

关于连字的快速说明：使用下划线而不是连字符。它可能记录在您的更多详细信息链接中的某个地方，但没有人有时间做这个。 ;-)

给它们上色的正确方法是什么？

@mattblang 如果您将它们用作字体图标，那么它只是一种字体。因此在 css 中设置文本颜色（如 color: red ）将为它们着色。

正是我需要的。我在使用<i class='material-icons'>icon_name</i> 时一直在为这种风格苦苦挣扎，但md-font-library 完美地解决了我的问题。

为什么在 md-icon 中使用变量不起作用？像 user.type .. 在这种情况下 user.type="face" 并作为文本使用 face

【参考方案2】：

今天最简单的方法是简单地从 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 directive 中所述。例如：

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

图标/连字的完整列表位于https://www.google.com/design/icons/

【讨论】：

如何给按钮添加图标？

【参考方案3】：

它现在实际上可以从凉亭工作。

bower install material-design-icons --save

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

【讨论】：

那怎么用呢？

【参考方案4】：

md-icons 还没有在 angular-material 的 Bower 版本中。我一直在使用Polymer's icons，它们可能还是一样的。

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/

【讨论】：

它烦人的ng-md 不像 md-icon 那样将图标放在图标按钮的中心。

是的，这里有同样的问题。大多数情况下，您必须使用 css 来优化位置。 position:relative;，然后将 svg 元素或容器 by left-top-right-bottom移动到您想要的更好位置。

【参考方案6】：

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

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

【讨论】：

凉亭安装材料设计图标github.com/google/material-design-icons

下载它，不要使用凉亭。 57MB

【参考方案7】：

截至撰写本文时，所有 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 材料。

【参考方案8】：

<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

【参考方案9】：

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