用 SVG 图形替换 mat-icon

Question

这里是 Angular 新手..有人可以指导我正确的方法吗我怎样才能用自定义图标正确地替换现有的 Material 图标，更准确地说是用 SVG 图形？是这样的：

所以这：

 <mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>

有了这个：

 <mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'INSERT_SVG_1_HERE' : 'INSERT_SVG_2_HERE'}}
</mat-icon>

原文由 Smithy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Unfotunatley this does not exactly solve your problem, because you will need to use the argument svgIcon on the mat-icon element instead of using the innerText of mat-icon 但除此之外它有效：

1. 您必须通过声明模块来允许角度从 svg 导入。
2. 要将图标导入/内联到 javascript 中，您必须重写加载程序。这可以通过使用 raw-loader 来实现。
3. 现在您将能够将 svg 导入 angular 并通过 MatIconRegistry 注册它们；

举个例子：

 // src/typings.d.ts

declare module '*.svg' {
  const svg: string;
  export default svg;
}

 // src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DomSanitizer } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatIconModule, MatIconRegistry } from '@angular/material';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import thumbsUp from '!!raw-loader!./thumbs-up.svg';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    MatIconModule
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
        'thumbsUp', sanitizer.bypassSecurityTrustHtml(thumbsUp));
  }
}

 // src/app/app.component.html
<mat-icon svgIcon="thumbsUp"></mat-icon>

 // src/app/thumbs-up.svg
<svg>...</svg>

另一种方法 是安装 @mdi/svg

npm install @mdi/svg

然后按照上述步骤，不同之处在于导入每个必要的图标，例如 expand_more 和 chevron_right

所以在 src/app/app.module.ts

 // src/app/app.module.ts
...
import expandMore from '!!raw-loader!@mdi/svg/svg/chevron-down.svg';
import chevronRight from '!!raw-loader!@mdi/svg/svg/chevron-right.svg';
...
export class WeddingDayModule {
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer
  ) {
    iconRegistry
      .addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(chevronRight))
      .addSvgIconLiteral('expand_more', sanitizer.bypassSecurityTrustHtml(expandMore));
  }
 }

在 html 中只是一种简化……但你会明白……

 //src/app/app.component.html
...
<mat-icon [svgIcon]="expanded ? 'chevron_right' : 'expand_more'" (click)="expanded = !expanded"></mat-icon>
...

这种方法的缺点是，你必须注册所有你想使用的图标……但至少你保持在同一个变化域中。您可以通过 svgIcon 更改所有连字，而不是使用连字，并且您获得的图标不仅仅是过时的图标 material-design-icons 库包含的图标。

我希望这有帮助

原文由 Eydrian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以使用 angular-svg-icon

angular-svg-icon 是一个 Angular 7 服务和组件，它提供了一种内联 SVG 文件的方法，使它们可以通过 CSS 和代码轻松设置样式。

该服务提供了一个图标寄存器，用于加载和缓存由其 url 索引的 SVG。该组件负责显示 SVG。从注册表中获取 svg 后，它将 SVGElement 和 SVG 克隆到组件的内部 HTML 中。

更多信息：https: //www.npmjs.com/package/angular-svg-icon

原文由 Stack Overflow 发布，翻译遵循 CC BY-SA 4.0 许可协议