Angular Material Design：如何自动使用所有内置的 UI 图标？答案

【问题标题】：Angular Material Design: how to automatically use all the built-in UI icons?Angular Material Design：如何自动使用所有内置的 UI 图标？
【发布时间】：2016-03-04 07:25:06
【问题描述】：

我正在使用 Google Angular Material library 尝试一个 Angular 应用项目。

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

按预期工作，除了对话框有 SVG 图标，它们在 html 中定义，路径如下： <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 mb 的图标...我需要列出我想要链接的每个图标吗？如.icon("menu", "./assets/svg/menu.svg", 24)

【问题讨论】：

你检查$mdIconProvider了吗？您需要配置图标以使用md-icon。 material.angularjs.org/latest/api/service/$mdIconProvider
我试过了。我注意到 Bower 安装包含几个 MB 的图标。我可以链接到根目录吗？请参阅上面的更新...
当然我注意到我可以只下载我需要的图标 -- ics_close_24px.svg 并将其放在路径中。那么，哪个更受欢迎？

标签： angularjs icons material-design angular-material

【解决方案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> 并将 menu 替换为您要查找的图标的名称。

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

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

【讨论】：

【解决方案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

【讨论】：