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 !


Cet article est un extrait de ma formation “MaĂźtriser Angular : RĂ©ussir votre prochain projet en entreprise ». Si vous souhaitez rĂ©ussir votre prochain projet Angular, vous pouvez recevoir mes recommandations par email.