Angular Material 设计：如何自动使用所有内置的UI图标？

Question

我正在尝试使用 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...Bower 下载大约有 200 MB 的图标...我是否需要列出每个我想要的图标 link？如 .icon("menu", "./assets/svg/menu.svg", 24)

Answer 1

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

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

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

查看 material 图标指南的第 1 here 部分

Answer 2

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

经过一番研究，我终于找到了一些东西！ 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 : 还有一个很好的 Whosebug 答案 here.

Angular Material 设计：如何自动使用所有内置的UI图标？

Angular Material Design: how to automatically use all the built-in UI icons?

angularjs

icons

material-design

angular-material