Angular Material Design：如何自動使用所有內置的UI圖標？

我正在嘗試使用Google Angular Material library的Angular應用程序項目。Angular Material Design：如何自動使用所有內置的UI圖標？

按照指示通過Bower添加了#master分支。按照指示將Bower組件的CSS和JS fils鏈接到我的索引頁面。

按預期工作，除之類的東西對話有SVG的圖標，這是在HTML中徑處理是這樣定義的： <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>

這是不是在我的項目，也不是鮑爾組件文件夾...

因此給我一個404：

我應該如何配置項目以獲得所需的所有圖像？我創建img/icons路徑，如果我知道從哪裏得到所有可能的圖標...

OK，我已經加入這個我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)

來源

2015-11-30 Steve

你有沒有檢查'$ mdIconProvider'？您需要配置使用'md-icon'的圖標。 https://material.angularjs.org/latest/api/service/$mdIconProvider –

我試過了。我注意到Bower安裝由幾MB圖標組成。我可以鏈接到根？請參閱上面的更新... – Steve

當然，我注意到我只能下載我需要的圖標 - 「ics_close_24px.svg」並將其放在路徑中。那麼，哪個是優先？ – Steve

我也有同樣的問題，我沒能找到一個合適的回答。

經過一番研究，我終於找到了一些東西！ 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：還有一個很好的計算器答案here。

來源

2016-09-14 09:45:37 Maxime

-1

複製所有選定的SVG圖標，你需要的圖像/圖標您的應用程序文件夾裏面，然後如下使用它們：

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

如果您計劃使用大量的圖標，使用CSS字體圖標。一個CSS文件將加載所有的圖標，而不是多個SVG鏈接。

檢查部1的材料圖標here引導

來源

2015-12-01 11:46:46 nitin

Angular Material Design：如何自動使用所有內置的UI圖標？

回答

相關問題