Utiliser Font Awesome avec Angular

Ajouter des icônes à notre site Web permet d'améliorer son esthétique, de faciliter la navigation et d’améliorer l’expérience utilisateur.

Font Awesome est la librairie d'icônes la plus populaire parmi les designers et les développeurs et nous permet de facilement avoir accès à plus de 1700 icônes gratuitement et plus de 30 000 icônes en version payante.

Dans cet article, nous allons voir comment installer et utiliser Font Awesome sur nos projets Angular.

Si vous préférez le format vidéo, voici la vidéo YouTube correspondante à cet article.

Web Font vs SVG

Il y a deux méthodes habituellement utilisées pour afficher des icônes, les icônes peuvent provenir d’une Web Font ou d’un SVG.

Web Font

Pour les icônes, une Web Font est simplement une police d’écriture qui fait correspondre des caractères spéciaux à des icônes.

Le caractère spécial "\f0f4" correspond à l'icône "Café" dans la Web Font de Font Awesome

L’avantage est sa simplicité d’utilisation, il suffit de charger la Web Font et d’utiliser des caractères spéciaux pour que cela fonctionne. La taille et la couleur des icônes sont customisables comme pour du texte.

L’inconvénient est que cette technique nécessite de télécharger la Web Font en entière, même si nous n’utilisons que quelques icônes.

Il existe néanmoins des outils pour charger un sous-ensemble de la Web Font afin d'optimiser les performances.

SVG

La deuxième technique consiste à utiliser des SVG pour chacune de nos icônes.

L'icône "Café" correspond à un SVG accessible dans le DOM de l'application

L’avantage est l’optimisation des performances et la personnalisation car nous pouvons charger uniquement les icônes qui nous intéressent. Et étant des SVG nous pouvons les manipuler complètement comme un SVG classique (Utilisation avancée).

Par contre cette méthode est moins pratique à utiliser et peut dégrader la Developer Experience (voir plus bas dans l'article).

Installation de Font Awesome avec les Web Fonts

Commençons par installer Font Awesome avec les Web Fonts, pour cela nous devons installer le package NPM @fortawesome/fontawesome-free sur notre projet Angular.

npm install --save @fortawesome/fontawesome-free

Ensuite nous devons importer le CSS du package dans le style de notre application.

"styles": [
    "src/styles.scss",
    “node_modules/@fortawesome/fontawesome-free/css/all.css"
]

Fichier angular.json

C'est tout pour l'installation, nous pouvons désormais utiliser les icônes de Font Awesome dans nos fichiers HTML.

<i class="fa-solid fa-coffee"></i>
<i class="fa-regular fa-square-plus"></i>
<i class="fa-brands fa-youtube"></i>

Fichier component.html

Les icônes s'affichent directement et nous pouvons les customiser leur taille et leur couleur en CSS comme pour du texte.

Les icones de Font Awesome s'affichent correctement

Nous pouvons voir dans l'onglet Network du navigateur le chargement des Web Fonts.

Chargement des Web Fonts (Solid, Regular et Brands) de Font Awesome dans l'onglet Network

Même si nous utilisons seulement 3 icônes dans notre application, par défaut, les centaines d’icones seront chargées dans la Web Font.

Le téléchargement des Web Fonts peut dégrader le premier chargement de votre application, si ce problème de performance devient gênant sur vos applications, vous pouvez optimiser la taille des Web Fonts avec le service de Subsetting de Font Awesome Pro (Version payante) ou avec le package fontawesome-subset.

Installation de Font Awesome avec les SVGs

Pour utiliser le mode SVG, Font Awesome nous propose un package spécial pour Angular nommé angular-fontawesome.

Pour l'installer sur notre projet, il suffit d'exécuter la commande suivante :

ng add @fortawesome/angular-fontawesome

Ce package nous fournit le composant Angular FaIconComponent que nous pouvons utiliser dans nos composants en luissant passer en Input() une icône qui doit être importée côté Typescript.

<fa-icon [icon]="faCoffee"></fa-icon>
<fa-icon [icon]="faSquarePlus"></fa-icon>
<fa-icon [icon]="faYoutube"></fa-icon>

Fichier home.component.html

import {Component} from '@angular/core';
import {FaIconComponent} from "@fortawesome/angular-fontawesome";
import {faCoffee} from "@fortawesome/free-solid-svg-icons";
import {faYoutube} from "@fortawesome/free-brands-svg-icons";
import {faSquarePlus} from "@fortawesome/free-regular-svg-icons";

@Component({
 selector: 'app-home',
 standalone: true,
 imports: [
   FaIconComponent
 ],
 templateUrl: './home.component.html',
 styleUrl: './home.component.scss'
})
export class HomeComponent {

 faCoffee = faCoffee;
 faSquarePlus = faSquarePlus;
 faYoutube = faYoutube;
 
}

Fichier home.component.ts

Les icônes qui s'affichent représente cette fois-ci des SVGs.

Les icones SVG de Font Awesome

Il est possible de passer directement en paramètre le nom des icônes plutôt que les importer en Typescript, mais cela nécessite une configuration supplémentaire, voir la documentation sur cet usage.

La méthode à choisir pour vos projets

Nous allons voir quelle méthode choisir pour nos projets Angular.

Performances

Par défaut, la méthode des SVG est plus performante car nous ne chargeons que les icônes nécessaires dans notre bundle.

La méthode avec les Web Fonts charge toutes les icones, ce qui demande plus de bande passante pour le chargement initial de l’application.

Par contre, si nous optimisons la taille des Web Fonts nous pouvons mettre les deux méthodes à égalité en terme de performances.

Fonctionnalités

L'utilisation des SVGs permet beaucoup plus de personnalisation des icônes car nous avons accès au SVG complet.

C'est un point à prendre en compte selon votre besoin, mais il est fort probable que vous n'ayez pas du tout besoin de cette personnalisation poussée.

Compatibilité

Dans certains cas, l'utilisation de SVG peut s'avérer incompatible avec certains Framework.

Par exemple si vous utilisez le framework PrimeNG, celui-ci fournit des Inputs pour customiser les icones de ses composants. Ces Inputs fonctionnent uniquement avec des classes CSS donc avec la Web Font de Font Awesome.

<!-- Ne fonctionnera pas avec la méthode SVG -->
<p-button (onClick)="doSomething()" icon="fa-solid fa-add"></p-button>

Exemple de composant PrimeNG nécessitant une classe CSS pour customiser son icône

Developer Experience (DX)

Concernant la facilité d'utilisation et la Developer Experience, l'utilisation des Web Fonts possède de nombreux avantages que n'a pas la méthode SVG.

Pas besoin d'importer l'icône depuis Typescript
Pas de dépendance supplémentaire sur notre projet Angular (uniquement le package fontawesome-free)
Utilisation de Font Awesome standard à tout type de projet (Native HTML/CSS/JS, React, Vue, etc.)
Possibilité de copier coller directement le tag <i> depuis le site de Font Awesome

La méthode SVG a un avantage, c'est qu'elle permet d'éviter de mal orthographier le nom d'une icône car nous devons l'importer dans Typescript.

Nous nous rendrons compte du problème au moment du build et non lors du runtime.

Ma recommandation

Bien que Font Awesome propose directement un package spécial pour Angular, je vous recommande d'utiliser la méthode la plus simple d'utilisation et qui fourni la meilleure Developer Experience sur vos projets, c'est à dire la méthode avec les Web Fonts.

Vous pouvez aussi aller voir la comparaison Web Fonts vs SVG sur la documentation de Font Awesome.

Conclusion

Nous avons vu comment installer et utiliser Font Awesome sur nos projets Angular avec la méthode des Web Fonts et des SVGs. Enfin, nous avons vu les avantages et les inconvénients de chacune des méthodes et laquelle je vous recommande.

Abonnez vous pour ne pas rater les nouveaux articles !