作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试配置 mdi带有 @angular/material 的图标在我的小项目中。我已经尝试了几个教程,但都无济于事。
按照教程注册图标集时(如下图),出现一些错误...
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatIconRegistry, MatToolbarModule, MatIconModule } from '@angular/material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpModule,
MatToolbarModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import url(https://fonts.googleapis.com/icon?family=Roboto);
$BasicColor: #76b3c8;
body {
#basic {
background-color: $BasicColor;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PruebaAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
<mat-toolbar id="basic">
<span>Home</span>
</mat-toolbar>
<router-outlet></router-outlet>
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "./assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "./", "output": "./" },
{ "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
],
}
},
}
...
最佳答案
Working example https://stackblitz.com/edit/angular-material-mdi
npm install @mdi/angular-material --save
mdi.svg
到编译 Assets 列表
node_modules/@mdi/angular-material/mdi.svg
到
assets
的列表在您的
angular.json
文件使用
glob
句法
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "mdi.svg", "input": "node_modules/@mdi/angular-material/", "output": "./assets" }
],
mdi.svg
正确复制到 assets
文件夹
mdi.svg
文件被正确复制到
assets
文件夹运行
ng build
并查看生成的
dist/assets
文件夹查看是否
mdi.svg
存在。如果没有,您可能需要调整
glob
输入路径,因为它相对于工作区根。见
project assets documentation有关如何通过
angular.json
包含 Assets 的详细信息文件。
matIconRegistry
注册 svg 图标集在您的
AppModule
的构造函数中
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatIconRegistry, MatIconModule } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatIconModule, // you have to import MatIconModule into your app
]
})
export class AppModule {
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
}
}
mat-icon
使用
svgIcon
指定所需图标的组件属性(property)
<!-- Icon by itself -->
<mat-icon svgIcon="android"></mat-icon>
<!-- Icon button -->
<button mat-icon-button>
<mat-icon svgIcon="android"></mat-icon>
</button>
<!-- You can also combine an icon and text together -->
<button mat-button>
<mat-icon svgIcon="code-tags"></mat-icon>
<span>View source</span>
</button>
Note: As of 9 Jan 2020, you no longer have to specify the manual CSS adjustments shown below.
styles.css
用@angular/material 解决一些对齐问题
button.mat-menu-item {
line-height: 24px !important;
}
a.mat-menu-item > mat-icon {
margin-bottom: 14px;
}
.mat-icon svg {
height: 24px;
width: 24px;
}
mdi.svg
文件,尽管它存在于
dist/assets
中使用时的文件夹
ng build
这可能意味着某些东西正在阻止/拦截 HTTP 请求。
angular-in-memory-api
时您需要设置属性
passThruUnknownUrl: true
导入时
HttpClientInMemoryWebApiModule
(请参阅
releated issue )因为这允许图标集的 URL 传递而不会被拦截。
mdi.svg
要正确获取文件。
关于angular - 我如何在 angular 6 中使用 mdi 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55308811/
我是一名优秀的程序员,十分优秀!