我想知道如何使用 Material 的图标，因为这不起作用：
<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>
我猜作为 icon 属性的参数给出的路径存在问题。我想知道这个图标文件夹实际上在哪里？
问问题
123312 次
9 回答
151
由于其他答案没有解决我的担忧，我决定写下我自己的答案。
指令的 icon 属性中给出的路径md-icon是位于静态文件目录中某处的 .png 或 .svg 文件的 URL。因此，您必须将该文件的正确路径放在图标属性中。ps 将文件放在正确的目录中，以便您的服务器可以提供它。
记住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>
:wheregetMyIcon中定义的方法$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>
有关更多详细信息，请查看我们的
于 2014-10-05T20:04:28.070 回答
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/
于 2015-11-01T13:14:58.310 回答
28
它现在实际上可以从凉亭工作。
bower install material-design-icons --save
它下载 37.1 KB。然后它提取并安装。您将在 bower_components 文件夹中看到一个名为 material-design-icons 的文件夹。总大小约为 299KB
于 2014-12-15T02:45:25.673 回答
6
md-icons 还没有在 angular-material 的凉亭版本中。我一直在使用Polymer 的图标，它们可能还是一样的。
bower install polymer/core-icons
于 2014-10-21T04:21:59.147 回答
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>
于 2015-09-15T09:32:30.890 回答
3
在他们的最新版本中有一个指令叫做md-icon
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
于 2014-11-01T01:10:41.933 回答
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>
这是最新的文档：
于 2017-10-20T11:53:52.967 回答
0
<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
于 2014-11-22T03:33:28.433 回答
0
通过使用 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;
}
于 2015-11-04T11:18:23.847 回答