Question

我正在尝试与Google Angular Material library进行角色应用项目。

按照指示通过Bower添加#master分支。根据指示将Bower Components中的CSS和JS文件链接到我的索引页面。

按预期工作，除了像对话框这样的东西有SVG图标，这些图标在html中定义为pathed，如下所示： <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>

哪个不在我的项目中，也不在Bower Components文件夹中......

因此给了我一个404：

我应该如何配置项目以获得所有预期的图像？如果我知道在哪里获得所有可能的图标，我会创建img/icons路径......

好的，我已将此添加到我的app.js：

angular.module('app').config(function($mdIconProvider) {
  // Configure URLs for icons specified by [set:]id.
  $mdIconProvider
  .defaultIconSet('bower_components/material-design-icons');
});

但仍然是404 ...凉亭下载就像200平方米的图标......我是否需要列出我要链接的每个图标？与.icon("menu", "./assets/svg/menu.svg", 24)

中一样

Answer 1

我确实遇到了同样的问题，但我找不到合适的答案。

经过一番研究，我终于找到了一些东西！ https://github.com/angular/material/issues/1668#issuecomment-156368247

正如“ ranbuch ”所说，一旦你加载了字体Material Icons（来自CDN或本地），你就可以使用这个指令： <md-icon aria-label="Menu" class="material-icons">menu</md-icon>并将菜单替换为您要查找的图标的名称。

这样，它允许你跳过每个svg的长列表。

PS：还有一个很好的stackoverflow答案here。

Answer 2

将所需的所有svg图标复制到应用程序内的images / icons文件夹中，然后按如下所示使用它们：

<md-icon md-svg-src="images/icons/leftArrow.svg" 
         ng-click="previous()"  class="icon-color">
</md-icon>

如果您打算使用大量图标，请使用css字体图标。一个css文件将加载所有图标，而不是多个svg链接。

检查材料图标指南的第1部分here

角度材质设计：如何自动使用所有内置UI图标？

2 个答案: