Skip to main content

Icônes : Material Symbols

Etapes pour utiliser les Material Symbols

1. Ajouter la police Material Symbols

Ajouter dans le <head> du index.html :

Il est aussi possible d'utiliser Rounded, Sharp ou Filled selon le style voulu.

Exemples :

  • Material+Symbols+Rounded
  • Material+Symbols+Sharp
  • Material+Symbols+Outlined
  • Material+Symbols+Filled

Configurer l'app pour utiliser ces fonts

Dans le fichier app.config.ts (Angular 15+) :

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

export const appConfig: ApplicationConfig = {
  providers: [
    ...,
    {
      provide: 'init-material-symbols-fontSet',
      useFactory: (iconRegistry: MatIconRegistry, _sanitizer: DomSanitizer) => {
        return () => {
          iconRegistry.registerFontClassAlias('material-symbols-outlined');
          // Possible également d'enregistrer d'autres variantes ici :
          // iconRegistry.registerFontClassAlias('material-symbols-rounded');
        };
      },
      deps: [MatIconRegistry, DomSanitizer],
      multi: true
    }
  ],
};

Utiliser les Material Symbols

<mat-icon fontSet="material-symbols-outlined">home</mat-icon>
Back to top