How to Use Custom SVG Icons in Angular Material

current.component.html

<mat-icon svgIcon="marker" [ngStyle]="{ 'color': 'red' }">marker</mat-icon>

current.component.ts

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

@Component({
  selector: "app-current",
  templateUrl: "./current.component.html",
  styleUrls: ["./current.component.css"],
  encapsulation: ViewEncapsulation.None,
})
export class CurrentComponent{
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon('marker', this.domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/marker.svg'));
  }
}

current.module.ts

import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [
    CurrentComponent,
  ],
  imports: [
    MatIconModule,
    HttpClientModule,
  ],
  bootstrap: [AppComponent]
})
export class CurrentModule {}