Partie 1 : Démarrer un projet sur de bonnes bases
Partie 2 : Construire un espace membre sécurisé avec JWT
Partie 3 : Implémenter des fonctionnalités métiers
Partie 4 : Bonus

3.1.3. Choix de la librairie pour les icônes

Dans beaucoup d’applications web, on retrouve souvent de petites icônes permettant d’enrichir l’interface utilisateur : un crayon pour l’édition d’un élément, une corbeille pour la suppression, un petit bonhomme pour l’onglet « Mon profil », etc. Ces petites icônes sont bien pratiques, et aide l’utilisateur à repérer rapidement le type d’action qu’il va effectuer. Nous utiliserons ces icônes dans notre application de productivité, pour le menu de l’espace membre par exemple :

Exemple d’utilisation des icônes pour notre menu.

Là aussi, il existe un très grand nombre de librairies qui nous proposent d’ajouter des icônes dans votre application. Les plus connues sont Font Awesome et Material Icons. La librairie Font Awesome impose d’importer des modules dans votre projet, et aussi de définir des propriétés dans vos composants. Cela fait beaucoup de lignes de codes supplémentaires à ajouter et à maintenir. De plus, beaucoup d’icônes proposées par Font Awesome ne sont pas disponibles gratuitement.

Pour toutes ces raisons, nous allons plutôt utiliser les icônes de la librairie Material Icons. De nombreuses icônes sont disponibles, et elles sont maintenus par Google. De plus, l’intégration de ces icônes est plus simple. Il suffit d’ajouter une balise dans le fichier index.html, juste avant la balise fermante </head>, pour importer toutes les icônes dont nous auront besoin :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ensuite, nous devons ajouter un ensemble de règles CSS défini par Google, pour mettre en forme les icônes que nous venons d’importer dans le projet. Ces règles sont globales dans notre application, donc nous les ajoutons dans le fichier style.scss :

/* Material icons */
.material-icons {
 font-family: 'Material Icons';
 font-weight: normal;
 font-style: normal;
 font-size: 24px;  /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
 cursor: pointer;

 /* Support for all WebKit browsers. */
 -webkit-font-smoothing: antialiased;
 /* Support for Safari and Chrome. */
 text-rendering: optimizeLegibility;
 
 /* Support for Firefox. */
 -moz-osx-font-smoothing: grayscale;
 
 /* Support for IE. */
 font-feature-settings: 'liga';
}

Heu… d’où vient ce code magique ?

Eh bien, comme je vous le disais, ce code a été définis par Google. En fait, il existe un guide de démarrage pour ajouter les Material Icons dans un nouveau projet. Nous n’avons donc rien inventé, nous récupérons simplement le code qu’on nous demande d’ajouter dans notre projet.

D’ailleurs, le guide de démarrage propose d’ajouter des règles supplémentaires afin de personnaliser la taille et la couleur des icônes de notre application. Nous allons commencer par ajouter des règles pour définir différentes tailles à nos icônes :

/* Règles pour la taille des icônes. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Et on va également ajouter des règles personnalisées pour définir deux types de couleurs pour nos icônes, gris et gris foncé. Nous n’utiliserons pas d’autres couleurs pour les icônes dans notre application, donc les quelques lignes suivantes nous suffiront :

/* Règles pour définir différentes couleurs aux icônes. */
.material-icons.md-grey {
 color: rgb(155, 155, 155);
}
.material-icons.md-grey:hover {
 color: rgb(105, 105, 105) !important;
}
 
.material-icons.md-dark-grey {
 color: rgb(85, 85, 85);
}
.material-icons.md-dark-grey:hover {
 color: rgb(65, 65, 65) !important;
}

Enfin, nous sommes prêts à ajouter de belles icônes à nos templates ! L’utilisation des Material Icons se fait en ajoutant une simple balise dans vos templates. Dans le composant racine app.component.html, essayer d’ajouter le code suivant :

<i class="material-icons">thumb_up</i>

Dans cet exemple, on affiche un pouce tourné vers le haut, grâce à thumb_up.

Comme vous pouvez le voir, il suffit de définir l’icône que l’on souhaite afficher grâce au terme entre les balises <i>.

L’ensemble des icônes est disponible sur le site de Material Icons. Vous pouvez aller y faire un tour. Lorsque nous serons plus avancés dans nos développements, nous irons récupérer les icônes dont nous aurons besoin.