我想在我的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中的材质设计图标？

回答

更新

相关问题