我想知道如何使用Material的图标,因为这不起作用:
<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>
我想作为icon属性的参数给出的路径存在问题 . 我想知道这个图标文件夹到底在哪里?
由于其他答案没有解决我的问题,我决定写自己的答案 .
md-icon 指令的icon属性中给出的路径是位于静态文件目录中某处的.png或.svg文件的URL . 因此,您必须将该文件的正确路径放在icon属性中 . p.s将文件放在正确的目录中,以便您的服务器可以为其提供服务 .
md-icon
记住 md-icon 不像引导程序图标 . 目前它们只是一个显示.svg文件的指令 .
Update
自问题发布以来,角度材料设计发生了很大变化 .
现在有几种方法可以使用 md-icon
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 中定义的方法 .
getMyIcon
$scope
或 <md-icon md-svg-icon="social:android"></md-icon>
<md-icon md-svg-icon="social:android"></md-icon>
要使用此功能,您必须使用 $mdIconProvider 服务来使用svg iconsets配置您的应用程序 .
$mdIconProvider
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>
在这之前你必须像这样加载字体库..
<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
今天最简单的方法是简单地从Google字体中请求Material Icons字体,例如在HTML标头标记中:
或者在样式表中:
@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/
它实际上现在从凉亭工作 .
bower install material-design-icons --save
它下载37.1 KB . 然后它提取并安装 . 您将在bower_components文件夹中看到名为material-design-icons的文件夹 . 总大小约为299KB
md-icons aren 't in the bower release of angular-material yet. I'已经使用Polymer's icons,无论如何它们可能都是相同的 .
bower install polymer/core-icons
简单方法:使用以下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指定fill-color:
<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>
资料来源:https://klarsys.github.io/angular-material-icons/
在他们的最新版本中,有一个名为 md-icon 的指令
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
截至撰写本文时,所有 md- 前缀现在都是 mat- 前缀!
md-
mat-
把它放在你的html头中:
在我们的模块中导入:
import { MatIconModule } from '@angular/material';
在您的代码中使用:
<mat-icon>face</mat-icon>
这是最新的文档:
https://material.angular.io/components/icon/overview
<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
通过使用喜欢使用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; }
9 回答
由于其他答案没有解决我的问题,我决定写自己的答案 .
md-icon
指令的icon属性中给出的路径是位于静态文件目录中某处的.png或.svg文件的URL . 因此,您必须将该文件的正确路径放在icon属性中 . p.s将文件放在正确的目录中,以便您的服务器可以为其提供服务 .记住
md-icon
不像引导程序图标 . 目前它们只是一个显示.svg文件的指令 .Update
自问题发布以来,角度材料设计发生了很大变化 .
现在有几种方法可以使用
md-icon
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
中定义的方法 .或
<md-icon md-svg-icon="social:android"></md-icon>
要使用此功能,您必须使用
$mdIconProvider
服务来使用svg iconsets配置您的应用程序 .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>
在这之前你必须像这样加载字体库..
<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
今天最简单的方法是简单地从Google字体中请求Material Icons字体,例如在HTML标头标记中:
或者在样式表中:
然后使用带有连字的字体图标,如md-icon directive中所述 . 例如:
完整的图标/连字列表位于https://www.google.com/design/icons/
它实际上现在从凉亭工作 .
它下载37.1 KB . 然后它提取并安装 . 您将在bower_components文件夹中看到名为material-design-icons的文件夹 . 总大小约为299KB
md-icons aren 't in the bower release of angular-material yet. I'已经使用Polymer's icons,无论如何它们可能都是相同的 .
简单方法:使用以下CDN:
将ngMdIcons注入angularjs应用程序:
在你的html中使用ng-md-icon指令,通过css指定fill-color:
资料来源:https://klarsys.github.io/angular-material-icons/
在他们的最新版本中,有一个名为
md-icon
的指令截至撰写本文时,所有
md-
前缀现在都是mat-
前缀!把它放在你的html头中:
在我们的模块中导入:
在您的代码中使用:
这是最新的文档:
https://material.angular.io/components/icon/overview
来源:https://material.angularjs.org/#/demo/material.components.button
通过使用喜欢
使用css和字体相同的位置