Episode 6 : Nous avons mis en place le style global de notre application dans l’épisode précédent, grâce à la célèbre librairie Bootstrap. Cependant, cette librairie ne fournit pas d’icônes par défaut. Il s’agit de petits indicateurs très utiles pour l’utilisateur, lui permettant d’indiquer la page d’accueil avec une petite icône de maison, ou encore une roue indentée pour indiquer la page des paramètres. Mais comment ajouter ces icônes dans notre projet généré avec Angular CLI ?

Nous avons déjà ajouté la librairie Bootstrap à notre application, afin de définir un style global simplement pour notre interface. Maintenant, il nous reste encore à affiner tout cela, en ajoutant quelques indicateurs visuels .

La librairie Material Icons

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 : 

Les fameuses petites icônes, très agréables pour l’utilisateur !

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. 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éfinies 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 :  

01 /* Material icons */ 
02 .material-icons { 
03  font-family: 'Material Icons'; 
04  font-weight: normal; 
05  font-style: normal; 
06  font-size: 24px;  /* Preferred icon size */ 
07  display: inline-block; 
08  line-height: 1; 
09  text-transform: none; 
10  letter-spacing: normal; 
11  word-wrap: normal; 
12  white-space: nowrap; 
13  direction: ltr; 
14
15  /* Support for all WebKit browsers. */ 
16  -webkit-font-smoothing: antialiased; 
17
18  /* Support for Safari and Chrome. */ 
19  text-rendering: optimizeLegibility; 
20
21  /* Support for Firefox. */ 
22  -moz-osx-font-smoothing: grayscale; 
23
24  /* Support for IE. */ 
25  font-feature-settings: 'liga'; 
26 } 

Heu… d’où vient ce code magique ? 

Eh bien, comme je vous le disais, ce code a été défini 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 : 

01 /* Règles pour la taille des icônes. */
02 .material-icons.md-18 { font-size: 18px; } 
03 .material-icons.md-24 { font-size: 24px; } 
04 .material-icons.md-36 { font-size: 36px; } 
05 .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 : 

01 /* Règles pour définir différentes couleurs aux icônes. */ 
02 .material-icons.md-grey {
03  color: rgb(155, 155, 155);
04  cursor: pointer;
05 } 
06 .material-icons.md-grey:hover { 
07  color: rgb(105, 105, 105) !important;
08 } 
09 .material-icons.md-dark-grey { 
10  color: rgb(85, 85, 85);
11  cursor: pointer;
12 } 
13 .material-icons.md-dark-grey:hover { 
14  color: rgb(65, 65, 65) !important;
15 } 

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. 


Nous savons maintenant intégrer des petites icônes dans notre application. Cet épisode était un peu plus court, mais cela nous permettra de mettre en place des indicateurs visuels plus tard dans notre application, n’importe où dans notre projet.

Dans le prochain épisode, nous nous re-concentrerons sur le code Angular pur, en ajoutant des classes TypeScript capables de modéliser les entités métiers de Awesome List : un utilisateur, une tâche, etc. C’est moins compliqué que ça en a l’air, pas d’inquiétudes !

Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boîte mail. En fait, cet article fait partie d’une série de 10 articles extraits de l’ouvrage Maîtriser Angular pour l’entreprise.