如何使用Angular 4中的材质设计图标?
问题描述:
我想在我的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
这是不同的!
答
只需按照下列步骤操作:从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
部件使用它
更新
我已经改变了说明,以便将更高版本的工作。
答
对于所有谁使用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>
答
答案相似,你可以在你的.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>
非常感谢你:d –
感谢您在过去的一天,你的信息response.I一直缠斗一个非常奇怪的问题。我在本地环境中成功使用了 。当我将相同的代码部署到我的测试服务器时,图标显示并且一切都很美 我收到以下错误消息。检索图标时出错:
@RiceJunkie您使用的是什么版本的angular-material2? – Edric