Menampilkan SVG Icons

Untuk mengasosiasikan nama icon dengan SVG Url digunakan Injectable Service MatIconRegistry.

Umumnya kita hanya perlu melakukan register dan load icon satu kali, dapat kita lakukan pada app.module.ts. (pada tutorial akan dilakukan pada contactmanager-app.component.ts).

Untuk mencegah XSS vulnerabilities perlu ditandai sebagai trusted resource dengan menggunakan Angular DomSanitizer service.

Download file avatars.svg di sini. Kemudian simpan di folder assets.

Kemudian buka file contactmanager-app.component.ts, lakukan registrasi icon

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

@Component({
  selector: 'app-contactmanager-app',
  template: `
    <app-sidenav></app-sidenav>
  `,
  styles: [
  ]
})
export class ContactmanagerAppComponent implements OnInit {

  //lakuka registrasi icon
  constructor(iconReg: MatIconRegistry, sanit: DomSanitizer) { 
    iconReg.addSvgIconSet( sanit.bypassSecurityTrustResourceUrl('assets/avatars.svg'));
  }

  ngOnInit(): void {
  }

}

Kemudian kita buka sidenav.component.html,

<mat-drawer-container class="app-sidenav-container" autosize>
    <mat-drawer #drawer class="app-sidenav mat-elevation-z10" [mode]="isScreenSmall ? 'over' : 'side' " [opened]="!isScreenSmall">
        <mat-toolbar color="primary">
            <span>Contact</span>
        </mat-toolbar>
        <mat-nav-list>
            <mat-list-item *ngFor="let user of users | async">
                <!-- gunakan svgIcon -->
               <a matLine href="#">
                    <mat-icon svgIcon="{{ user.avatar }}"></mat-icon>   {{ user.name }}
                </a>
            </mat-list-item>
        </mat-nav-list>
    </mat-drawer>
  
    <div class="app-sidenav-content">
        <app-toolbar (toggleSidenav)="drawer.toggle()"></app-toolbar>
        <div class="wrapper">
            <router-outlet></router-outlet>
        </div>
    </div>
  
</mat-drawer-container>

Terakhir buka file app.module.ts, tambahkan import untuk library HttpClientModule.

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';


const routes : Routes = [
  {path: 'contactmanager', loadChildren: () => import('./contactmanager/contactmanager.module').then(m=> m.ContactmanagerModule)},
  {path: 'demo', loadChildren: () => import('./demo/demo.module').then(m=> m.DemoModule)},
  {path: '**', redirectTo: 'contactmanager'}
]

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Jika kita jalankan aplikasi contact manager, sesuai ekspektasi, svg icon sudah ditampilkan.

Pada modul berikutnya kita akan buat ketika user diclick, detail data akan tampilkan pada main content.