时间戳

首页 > 解决方案 > 我如何在 Angular 6 中使用 mdi 图标

angular - 我如何在 Angular 6 中使用 mdi 图标

问题描述

我正在尝试在我的迷你项目中使用@angular/material配置mdi图标。我已经尝试了几个教程，但无济于事。

按照教程注册图标集时（如下所示），我收到一些错误...

constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { 
  matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
}

这是我的代码...

app.module.ts

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 { }

样式.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import url(https://fonts.googleapis.com/icon?family=Roboto);

$BasicColor: #76b3c8;
body {
  #basic {
    background-color: $BasicColor;
  }
}

索引.html

<!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>

app.component.html

<mat-toolbar id="basic">
  <span>Home</span>
</mat-toolbar>

<router-outlet></router-outlet>

角.json

...
"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" }
      ],
    }
  },
}
...

标签： angulariconsangular6

解决方案

工作示例https://stackblitz.com/edit/angular-material-mdi

安装 NPM 包

使用以下命令为 @mdi/angular-material 安装 npm 包

npm install @mdi/angular-material --save

包含mdi.svg到已编译资产列表中

使用语法添加node_modules/@mdi/angular-material/mdi.svg到文件中的assets列表angular.jsonglob

"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输入路径，因为它是相对于工作空间根目录的。有关如何通过文件包含资产的详细信息，请参阅项目资产文档angular.json。

将 SVG 图标集注册到 @angular/material 图标注册表

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属性

<!-- 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>

@angular/material 的 CSS 调整

注意：自 2020 年 1 月 9 日起，您不再需要指定如下所示的手动 CSS 调整。

此外，他们说将其添加到您的全局 CSS 文件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

例如，在使用时，angular-in-memory-api您需要passThruUnknownUrl: true在导入时设置属性HttpClientInMemoryWebApiModule（参见相关问题），因为这允许图标集的 URL 传递而不会被拦截。

服务器端渲染

对于 SSR，您可能必须在注册图标集时指定完整的 URL（请参阅相关问题）才能mdi.svg正确获取文件。

官方@mdi 文档

有什么可以参考@mdi官方文档。

推荐阅读