Angular MaterialでカスタムのIconを使う

公式ドキュメントに書いてありますが、忘れそうだったので。

app.component.ts

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private domSanitizer: DomSanitizer,
    private iconRegistry: MatIconRegistry,
  ) {
    this.iconRegistry.addSvgIcon(
      'cut', // ここで名前を指定
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/cut.svg') //必ずサニタイザーを利用して取得する。
    );
  }
}

なんかのhtml

<mat-icon svgIcon="cut"></mat-icon>

これだけだと、ちょっとsvgが大きくて、他のAngular Material Iconとサイズ感が違うので、僕はこんな感じでcssを当ててます。これは使うSVGによると思いますので、あくまでメモ程度まで。

どこかのscss

mat-icon[svgIcon] {
    svg {
        width: 1.2em;
        margin: auto;
    }
}