我想在我的 Angular 4 项目中使用来自 https://materialdesignicons.com/ 的图标。
网站上的说明仅涵盖如何将其包含在 Angular 1.x (https://materialdesignicons.com/getting-started) 中
如何包含 Material design 图标，以便可以像 <md-icon svgIcon="source"></md-icon> 使用 Angular Material 和 ng serve 一样使用它们？
注意：我已经包含了不同的google material icons！
【问题讨论】：
对于那些喜欢使用 SCSS 的人：
安装字体
$> npm install material-design-icons
导入src/styles.scss
@import '~material-design-icons/iconfont/material-icons.css';
并按照here的描述在 HTML 中使用它
<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>
为了参考Sam Claus'的评论，谢谢你，我添加了Templarian的设计图标的安装和使用。和上面那个类似。
通过包管理器安装字体
$> npm install @mdi/font
在src/styles.scss 或angular.json 中导入样式表，如A. Morel here 的评论中所述
@import '~@mdi/font/css/materialdesignicons.css';
或在 index.html 或任何地方使用 CDN URL 并按照here
的描述在 HTML 中使用它<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>
【讨论】：
angular.json中添加css文件路径并重新启动服务器的步骤（ng serve) as detailed in @A.Morel answer below. And also the steps for àpp.module.ts。
现在可以在 Material Design Icons - Angular 文档页面上找到有关如何将 Material Design 图标包含到您的 Angular Material 应用程序中的说明。
TL；DR：您现在可以利用 @mdi/angular-material NPM 包，其中包含作为单个 SVG 文件 (mdi.svg) 分发的 MDI 图标：
npm install @mdi/angular-material
然后可以将此 SVG 文件包含到您的应用中，方法是将其包含在您项目的 assets 配置属性中的 angular.json 中：
{
// ...
"architect": {
"build": {
"options": {
"assets": [
{ "glob": "**/*", "input": "./assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "./", "output": "./" },
{ "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
]
}
}
}
// ...
}
您的应用程序的主模块还需要声明必要的导入（用于加载图标的@angular/common/http 中的HttpClientModule 和@angular/material/icon 中的MatIconModule），以及将图标集添加到注册表：
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@NgModule({
imports: [
// ...
HttpClientModule,
MatIconModule
]
})
export class AppModule {
constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
iconRegistry.addSvgIconSet(
domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
);
}
}
现在也可以使用StackBlitz demo。
旧版本 Angular 的步骤如下所述：
只需按照以下步骤操作：
从 Angular Material 部分下的 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"
]
}
]
}
最后，通过MatIcon 组件和svgIcon 输入使用它：
<mat-icon svgIcon="open-in-new"></mat-icon>
【讨论】：
安装 npm 包
npm install material-design-icons --save
npm install --save @angular/material @angular/cdk
将材质图标 css 添加到您的 .angular-cli.json（不要忘记重新启动“ng serve”）
{
"apps": [
{
"styles": [
"node_modules/material-design-icons/iconfont/material-icons.css"
]
}
]
}
或在您的 src/styles.scss 中
@import '~material-design-icons/iconfont/material-icons.css';
在你的 app.module.ts 中导入模块
import { MatIconModule } from '@angular/material/icon';
...
@NgModule({
imports: [
...,
MatIconModule
],
然后像这样使用它：
<mat-icon>location_off</mat-icon>
从 Material Design Icons 中选择名称 => https://material.io/tools/icons/?style=baseline
【讨论】：
与@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>
【讨论】：
注意此答案适用于 Material Design Icons by Templarian 而不是 Google 的同名图标。我不明白为什么这些说明不在自述文件中，但请看。
首先，安装包：
npm install @mdi/font --save
然后，有必要将样式表添加到您的styles.scss 文件中。我在文件末尾添加了以下内容：
//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";
注意 $mdi-font-path 是覆盖 @mdi/font/scss/_variables.scss 中的默认设置所必需的，这会导致 webpack 编译器抱怨。如果忘记执行此操作，会出现一系列错误，如下所示：
错误 ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss 未找到模块：错误：无法解析 '../fonts/materialdesignicons-webfont.eot' 在 '/home/myRepo/myApp'
编辑：我不确定这是否有必要（在某些情况下可能是），但我还更新了.angular-cli.json 文件styles 元素：
"styles": [
"../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",
上述方法的另一种替代方法是直接导入 CSS，从而使图标工作起来非常轻松。在 typescript 文件中，我替换了 styleUrls 元素（以避免 Karma 出现奇怪的错误）：
// styleUrls: ['./graphics-control.component.css'],
styles: [require('./my.component.css'),
require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]
【讨论】：
基于 @theMayer 的回答，有我的版本使其适用于包 @mdi/font。
1-npm install @mdi/font --save
2- 在angular.json 的architect/buid/options/styles 下，添加"node_modules/@mdi/font/css/materialdesignicons.min.css"
3- 在src\app\app.module.ts 添加import { MatIconModule } from '@angular/material/icon'; 并在imports 部分添加MatIconModule
4- 在src\styles.scss 添加：
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";
5- 使用 mat-icon 在你的 html 中添加图标，例如：
<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>
【讨论】：
使用 Bootstrap 4 和 Angular 可以：
1) 运行：
npm install material-design-icons --save
2) 添加到styles.css 或styles.scss
@import '~material-design-icons/iconfont/material-icons.css';
3) 转到：..\node_modules\material-design-icons\iconfont\material-icons.css 并确保该部分与此完全相同（'MaterialIcons-Regular.woff2' )...:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('MaterialIcons-Regular.woff2') format('woff2'),
url('MaterialIcons-Regular.woff') format('woff'),
url('MaterialIcons-Regular.ttf') format('truetype');
}
4) 在 html 中使用图标：
<i class="material-icons">visibility</i>
【讨论】：
使用此命令安装图标 -
npm install material-design-icons --save
然后在样式数组中添加这一行 - "./node_modules/material-design-icons/iconfont/material-icons.css"
【讨论】：
npm i --save @angular/cdk @angular/material @angular/animationshammerjs
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
3.1 从'@angular/material/icon'导入{ MatIconModule }；
3.2 在导入数组中添加 MatIcomModule
然后在你的 app.component.html 中
首页 添加警报
【讨论】：