Intégrer des icônes SVG avec Angular Material

 

Angular Material, une bibliothèque d'UI pour Angular, offre une panoplie d'éléments visuels prêts à l'emploi, incluant des icônes. Les icônes SVG, sont des images vectorielles extensibles. Elles offrent une flexibilité et une netteté visuelle exceptionnelle, et leur utilisation avec Angular Material peut être réalisée de manière transparente. Même si Angular Material propose par défaut une bonne collection d'icone (liste ici), il peut être utile d'ajouter ses propres icones

Dans ce guide, nous allons voir les étapes pour intégrer et utiliser nos icônes SVG avec Angular Material.

 

Étape 1 : Installation d'Angular Material

Assurez-vous d'avoir Angular Material installé dans votre projet Angular. Si ce n'est pas déjà fait, utilisez Angular CLI pour ajouter Angular Material :

ng add @angular/material
 

Étape 2 : Intégration des icônes SVG

Placez vos fichiers SVG dans un répertoire approprié de votre projet, par exemple, dans  assets/icons.

Étape 3 : Création d'un module pour la configuration des icônes

Lors de l'intégration d'icônes SVG avec Angular Material, séparer la configuration des icônes dans un module dédié peut rendre votre code plus modulaire et maintenable. 

Créez un nouveau fichier, par exemple icon-config.module.ts, pour gérer la configuration des icônes. N'oubliez pas d'importer MatIconModule.

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

@NgModule({
  imports: [MatIconModule],
})
export class IconConfigModule {
  constructor(
      private matIconRegistry: MatIconRegistry,
      private domSanitizer: DomSanitizer) {
    // Ajoutez ici la configuration de vos icônes SVG
    this.matIconRegistry 
           .addSvgIcon('nom_de_votre_icone1',this.setPath(`${this.path}/chemin_vers_votre_icone1.svg`))
           .addSvgIcon('nom_de_votre_icone2',this.setPath(`${this.path}/chemin_vers_votre_icone2.svg`));
  } 

  private setPath(url: string): SafeResourceUrl {
      return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

 

Étape 4 : Intégration du module dans votre application

Dans votre module principal (app.module.ts), importez et utilisez IconConfigModule :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IconConfigModule } from './icon-config.module'; // Chemin vers votre module d'icônes

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IconConfigModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  // ...
}

Étape 5 : Utilisation des icônes SVG

Une fois la configuration effectuée, utilisez les icônes SVG dans votre application avec <mat-icon>.

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

Conclusion

En suivant ces étapes, vous pouvez intégrer facilement des icônes SVG dans votre application Angular utilisant Angular Material, offrant ainsi une interface utilisateur esthétique et personnalisée.