我想在我的angular 4項目中使用來自https://materialdesignicons.com/的圖標。網站上的說明只涵蓋了如何將其納入Angular 1.x（https://materialdesignicons.com/getting-started）如何使用Angular 4中的材質設計圖標？

我怎麼能包括材料設計圖標，這樣我就可以像使用Angular Material和ng serve<md-icon svgIcon="source"></md-icon>使用它們？

注：我已經包含google material icons這是不同的！

來源

2017-06-21 Matthias Herrmann

只需按照下列步驟操作：從here

下載mdi.svg下角材料部分，並將其放置在你的assets文件夾，應位於（從項目的根目錄）/src/assets：

在您的應用程序的模塊（又名app.module.ts），加上下面幾行：

import {MatIconRegistry} from '@angular/material/icon'; 
import {DomSanitizer} from '@angular/platform-browser'; 
... 
export class AppModule { 
    constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){ 
     matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg')); 
    } 
}

確保包括在assets.angular-cli.json下assets文件夾（雖然在默認情況下，它會在那裏）：
```
{ 
    "apps": [ 
     { 
       ... 
       "assets": [ 
        "assets" 
       ] 
     } 
    ] 
} 
```
：
最後，隨着svgIcon輸入經由MatIcon部件使用它

更新

我已經改變了說明，以便將更高版本的工作。

來源

2017-06-22 07:20:07 Edric

非常感謝你：d –

感謝您在過去的一天，你的信息response.I一直纏鬥一個非常奇怪的問題。我在本地環境中成功使用了。當我將相同的代碼部署到我的測試服務器時，圖標顯示並且一切都很美我收到以下錯誤消息。檢索圖標時出錯：

@RiceJunkie您使用的是什麼版本的angular-material2？ – Edric

對於所有誰使用SCSS：

npm install material-design-icons

在SRC

/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

和HTML如@ creep3007描述here

<i class="material-icons">visibility</i>

來源

2017-11-20 19:22:05 creep3007

答案相似，你可以在你的.angular-cli.json中指定樣式表：

安裝NPM包

npm install material-design-icons --save

材料圖標添加到您的.angular-CLI。JSON

{ 
    "apps": [ 
    { 
     "styles": [ 
     "../node_modules/material-design-icons/iconfont/material-icons.css" 
     ] 
    } 
    ] 
}

使用它

<i class="material-icons">visibility</i>

來源

2018-01-16 12:41:42 tilo

OP不使用Google Material Design圖標。他使用Templarian的MaterialDesignIcons。 – Edric

這是包含材質圖標的最佳方式，將其包含到scss文件或angular-cli.json中？ – thekingtn

如何使用Angular 4中的材質設計圖標？

回答

更新

相關問題