Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to Use Custom SVG Icons in Angular Material
<mat-icon svgIcon="marker" [ngStyle]="{ 'color': 'red' }">marker</mat-icon>
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'));
}
}
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";
@NgModule({
declarations: [
CurrentComponent,
],
imports: [
MatIconModule,
HttpClientModule,
],
bootstrap: [AppComponent]
})
export class CurrentModule {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment