# Trucs & Astuces
# Icônes : Material Symbols
## Etapes pour utiliser les Material Symbols
### 1. Ajouter la police Material Symbols
Ajouter dans le `` du `index.html` :
```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+) :
```typescript
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
```html
home
```