Can I create my own custom material icons with ligature support?
Currently, I use svgIcon to get Custom Icons,
Is there a way to make custom icons that support ligatures?
Here is my current code snippet:
app.component.ts
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
iconRegistry: MatIconRegistry,
sanitizer: DomSanitizer
) {
iconRegistry.addSvgIcon('key',
sanitizer.bypassSecurityTrustResourceUrl('assets/icons/key.svg')
);
iconRegistry.addSvgIcon('user',
sanitizer.bypassSecurityTrustResourceUrl('assets/icons/user.svg')
);
}
}
login.component.html
<mat-form-field>
<input matInput placeholder="Username" formControlName="username">
<mat-icon matPrefix svgIcon="user"></mat-icon>
<mat-error *ngIf="username.invalid">Username is required</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Password" formControlName="password">
<mat-icon matPrefix svgIcon="key"></mat-icon>
<mat-error *ngIf="password.invalid">Password is required</mat-error>
</mat-form-field>