Remplacer l'icône du tapis par un graphique SVG

À titre d'exemple:

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

// 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/thumbs-up.svg
<svg>...</svg>

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

Une autre approche consisterait à installer @mdi/svg

npm install @ mdi / svg

puis suivez les étapes ci-dessus, à la différence d'importer également chaque icône nécessaire, par exemple expand_more et chevron_right

donc dans src/app/app.module.ts

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

Et dans le html juste pour simplifier ... mais vous aurez l'idée ...

// src/typings.d.ts

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

l'inconvénient de cette approche est, que vous devrez enregistrer toutes les icônes que vous souhaitez utiliser ... Mais au moins vous restez dans le même domaine de changement. Au lieu d'utiliser les ligatures, vous pouvez toutes les changer via svgIcon et vous obtenez plus d'icônes que les icônes que la bibliothèque obsolète material-design-icons contient.

J'espère que cela aide