由于其他答案没有解决我的担忧,我决定写下自己的答案。
图标属性中给出的路径md-icon
指令是位于静态文件目录中某处的 .png 或 .svg 文件的 URL。因此,您必须将该文件的正确路径放入图标属性中。 p.s 将文件放在正确的目录中,以便您的服务器可以为其提供服务。
记住md-icon
不像引导程序图标。目前它们只是显示 .svg 文件的指令。
Update
自从这个问题发布以来,角度材料设计已经发生了很大的变化。
现在有几种使用方法md-icon
第一种方法是使用 SVG 图标。
<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>
Example:
<md-icon md-svg-src = '/static/img/android.svg'></md-icon>
or
<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>
:where getMyIcon
是一个定义在$scope
.
or
<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 指令文档 https://material.angularjs.org/latest/api/directive/mdIcon
$mdIcon服务文档 https://material.angularjs.org/latest/api/service/%24mdIcon
$mdIconProvider 服务文档 https://material.angularjs.org/latest/api/service/%24mdIconProvider