Question

这里有角新手。有人可以指导我正确的方式，如何用定制图标正确地替换现有的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>

Answer 1

这不能完全解决您的问题，因为您将需要在svgIcon元素上使用参数the mat-icon而不是innerText的{{1}}，否则作品：

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

例如：

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

在html中只是一个简化...但是您会明白的...

// 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));
  }
 }

这种方法的缺点是，您将必须注册要使用的所有图标...但是至少您要保留在相同的更改范围内。除了使用连字之外，您还可以通过//src/app/app.component.html ... <mat-icon [svgIcon]="expanded ? 'chevron_right' : 'expand_more'" (click)="expanded = !expanded"></mat-icon> ...更改所有连字，您不仅可以看到过时的svgIcon库中包含的图标，还可以获得更多的图标。

我希望对您有帮助

Answer 2

如果它不是材料图标的一部分，为什么不将其用作普通图像。就像普通的图片标签一样使用它：

TransformerFactory

Answer 3

您可以使用 angular-svg-icon

angular-svg-icon是Angular 7服务和组件，   提供了一种内联SVG文件的方法，以使其易于使用   由CSS和代码设置样式。

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

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

用SVG图形替换mat-icon

3 个答案: