<fa-icon/> svg for correct display on Safari/iOS

angular.json

@@ -31,7 +31,6 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "src/styles.css"
               ],
             "scripts": [

package-lock.json

@@ -16,7 +16,8 @@
         "@angular/platform-browser": "^20.0.4",
         "@angular/platform-browser-dynamic": "^20.0.4",
         "@angular/router": "^20.0.4",
-        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/angular-fontawesome": "^2.0.1",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@ng-idle/core": "^16.0.0",
         "@ng-select/ng-select": "^15.1.2",
         "@popperjs/core": "^2.11.8",
@@ -1410,11 +1411,48 @@
         "node": ">=18"
       }
     },
-    "node_modules/@fortawesome/fontawesome-free": {
+    "node_modules/@fortawesome/angular-fontawesome": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-2.0.1.tgz",
+      "integrity": "sha512-IdklZkuw+WS2GQWhFnr1EX/tOALnrKaj4YGnUmPaUg2Uf+Amj8Xi+M/qDrr915YJ5MaDxd9tZ1kqOHRcvQqq2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@angular/core": "^20.0.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
-      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
-      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
       "engines": {
         "node": ">=6"
       }

package.json

@@ -18,7 +18,8 @@
     "@angular/platform-browser": "^20.0.4",
     "@angular/platform-browser-dynamic": "^20.0.4",
     "@angular/router": "^20.0.4",
-    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/angular-fontawesome": "^2.0.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ng-idle/core": "^16.0.0",
     "@ng-select/ng-select": "^15.1.2",
     "@popperjs/core": "^2.11.8",

src/app/composants/account-details/account-details.component.html

@@ -3,7 +3,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'un participant</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToHome()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToHome()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body form-scrollable">
 
@@ -65,7 +65,7 @@
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Mot de passe</span></label>
 			<div class="col-sm-8">
-				<button type="button" (click)="updateMotDePasse()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-key"></i>&nbsp;<span i18n>Modifier</span></button>
+				<button type="button" (click)="updateMotDePasse()" class="btn bg-gradient btn-primary btn-sm field-separate"><fa-icon [icon]="faKey"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
 			</div>
 		</div>
 
@@ -207,7 +207,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateProfil()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Editer</span></button>
+		<button type="button" (click)="updateProfil()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Editer</span></button>
 	</div>
 </div>
 </div>

src/app/composants/account-details/account-details.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen, faKey } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ProfilList } from '../../interfaces/participant';
@@ -8,10 +10,11 @@ import { AccountService } from '../../services/account.service'
 import { Journees } from '../../interfaces/divers';
 import { DiversService } from '../../services/divers.service'
 
-@Component({ selector: 'app-account-details', imports: [FormsModule, MenuComponent], templateUrl: './account-details.component.html', styleUrl: './account-details.component.css' })
+@Component({ selector: 'app-account-details', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './account-details.component.html', styleUrl: './account-details.component.css' })
 
 export class AccountDetailsComponent implements OnInit
 {
+  faXmark = faXmark; faPen = faPen; faKey = faKey;
 
   profil: string = "";
   profils: ParticipantEnum[] = ProfilList;

src/app/composants/account-password/account-password.component.html

@@ -5,7 +5,7 @@
 	<div class="card shadow center">
     <div class="card-header"><span i18n>Changement de votre mot de passe</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToAccountDetails()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToAccountDetails()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -86,7 +86,7 @@
 
 		</div>
 		<div class="card-footer">
-      <button type="button" class="btn bg-gradient btn-danger btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!form.valid"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Modifier</span></button>
+      <button type="button" class="btn bg-gradient btn-danger btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!form.valid"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/account-password/account-password.component.ts

@@ -2,15 +2,18 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { FormsModule, FormBuilder, FormControl, FormGroupDirective, FormGroup, NgForm, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { NewPassword } from '../../interfaces/user';
 import { AccountService } from '../../services/account.service'
 
-@Component({ selector: 'app-account-password', imports: [CommonModule, FormsModule, ReactiveFormsModule, MenuComponent], templateUrl: './account-password.component.html', styleUrl: './account-password.component.css' })
+@Component({ selector: 'app-account-password', imports: [FontAwesomeModule, CommonModule, FormsModule, ReactiveFormsModule, MenuComponent], templateUrl: './account-password.component.html', styleUrl: './account-password.component.css' })
 
 export class AccountPasswordComponent
 {
+  faXmark = faXmark; faPen = faPen;
 
   newpassword: NewPassword = new NewPassword();
 

src/app/composants/account-update/account-update.component.html

@@ -4,7 +4,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'un participant</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToHome()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToHome()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body form-scrollable">
 
@@ -194,7 +194,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Modifier</span></button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/account-update/account-update.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ProfilList } from '../../interfaces/participant';
@@ -8,10 +10,11 @@ import { AccountService } from '../../services/account.service'
 import { Journees } from '../../interfaces/divers';
 import { DiversService } from '../../services/divers.service'
 
-@Component({ selector: 'app-account-update', imports: [FormsModule, MenuComponent], templateUrl: './account-update.component.html', styleUrl: './account-update.component.css' })
+@Component({ selector: 'app-account-update', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './account-update.component.html', styleUrl: './account-update.component.css' })
 
 export class AccountUpdateComponent implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck;
 
   profil: string = "";
   profils: ParticipantEnum[] = ProfilList;

src/app/composants/categorie-create/categorie-create.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'une catégorie</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -74,7 +74,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/categorie-create/categorie-create.component.ts

@@ -4,11 +4,15 @@ import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
 import { CategorieService } from '../../services/categorie.service';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPlus } from '@fortawesome/free-solid-svg-icons';
 
-@Component({ selector: 'app-categorie-create', imports: [FormsModule, MenuComponent], templateUrl: './categorie-create.component.html', styleUrl: './categorie-create.component.css'})
+@Component({ selector: 'app-categorie-create', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './categorie-create.component.html', styleUrl: './categorie-create.component.css'})
 
 export class CategorieCreateComponent implements OnInit
 {
+  faXmark = faXmark; faPlus = faPlus;
+
   @ViewChild('formRef') categorieForm!: NgForm;
 
   categorie: Categorie = new Categorie();

src/app/composants/categorie-details/categorie-details.component.html

@@ -3,7 +3,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'une catégorie</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body">
 
@@ -88,7 +88,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Editer</span></button>
+		<button type="button" (click)="updateCategorie(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Editer</span></button>
 	</div>
 </div>
 </div>

src/app/composants/categorie-details/categorie-details.component.ts

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
 import { CategorieService } from '../../services/categorie.service';
 
-@Component({ selector: 'app-categorie-details', imports: [FormsModule, MenuComponent], templateUrl: './categorie-details.component.html', styleUrl: './categorie-details.component.css' })
+@Component({ selector: 'app-categorie-details', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './categorie-details.component.html', styleUrl: './categorie-details.component.css' })
 
 export class CategorieDetailsComponent implements OnInit
 {
+  faXmark = faXmark; faPen = faPen;
 
   numeroCategorie: number = 0;
 

src/app/composants/categorie-list/categorie-list.component.html

@@ -5,8 +5,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-				<button type="button" (click)="goToNewCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
+				<button type="button" (click)="goToNewCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 			</div>
 		</div>
 	</div>
@@ -26,11 +26,11 @@
 				@for (categorie of categories; track categorie.numeroCategorie) {
 				<tr>
 					<td class="label-nobr"><a (click)="formCategorie(categorie.numeroCategorie)" class="link-primary pointeur-souris text-decoration-none">{{ categorie.libelle }}</a>&nbsp;&nbsp;</td>
-					<td>@if (categorie.available) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.uploadable) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.pollable) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.computed) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
-					<td>@if (categorie.displayable) { <i class="fa-solid fa-circle-check text-success"></i> } @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.available) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> } @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.uploadable) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> } @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.pollable) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> } @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.computed) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> } @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;</td>
+					<td>@if (categorie.displayable) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> } @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;</td>
 				</tr>
 				}
 			</tbody>

src/app/composants/categorie-list/categorie-list.component.ts

@@ -1,14 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPlus, faRotate, faCircleCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
 import { CategorieService } from '../../services/categorie.service';
 
-@Component({ selector: 'app-categorie-list', imports: [MenuComponent], templateUrl: './categorie-list.component.html', styleUrl: './categorie-list.component.css'})
+@Component({ selector: 'app-categorie-list', imports: [FontAwesomeModule, MenuComponent], templateUrl: './categorie-list.component.html', styleUrl: './categorie-list.component.css'})
 
 export class CategorieListComponent implements OnInit
 {
+  faPlus = faPlus; faRotate = faRotate; faCircleCheck = faCircleCheck; faCircleXmark = faCircleXmark;
 
   categories: Categorie[] = [];
 

src/app/composants/categorie-update/categorie-update.component.html

@@ -4,7 +4,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'une catégorie</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListCategorie()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body">
 
@@ -88,8 +88,8 @@
 
 	</div>
 	<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Modifier</span></button>
-			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;<span i18n>Effacer</span></button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><fa-icon [icon]="faTrash"></fa-icon>&nbsp;<span i18n>Effacer</span></button>
 	</div>
 </div>
 </form>

src/app/composants/categorie-update/categorie-update.component.ts

@@ -1,14 +1,19 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
+
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
 import { CategorieService } from '../../services/categorie.service';
-import { FormsModule, NgForm } from '@angular/forms';
 
-@Component({ selector: 'app-categorie-update', imports: [FormsModule, MenuComponent], templateUrl: './categorie-update.component.html', styleUrl: './categorie-update.component.css' })
+@Component({ selector: 'app-categorie-update', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './categorie-update.component.html', styleUrl: './categorie-update.component.css' })
 
 export class CategorieUpdateComponent implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck; faTrash = faTrash;
+
   @ViewChild('formRef') categorieForm!: NgForm;
 
   numeroCategorie: number = 0;

src/app/composants/chat/chat.component.html

@@ -7,7 +7,7 @@
         <div class="form-group col-sm-9 label-nobr">
   				<div class="input-group input-group-sn">
             <input type="text" (keydown.enter)="envoiNouvelleLigne()" class="form-control form-control-sm field-separate" id="input_message" [(ngModel)]="ajoute.ligne" autofocus>
-            <button type="button" (click)="envoiNouvelleLigne()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-comment"></i>&nbsp;<span i18n>Envoyer</span></button>
+            <button type="button" (click)="envoiNouvelleLigne()" class="btn bg-gradient btn-primary btn-sm field-separate"><fa-icon [icon]="faComment"></fa-icon>&nbsp;<span i18n>Envoyer</span></button>
   			  </div>
   			</div>
         <div class="form-group col-sm-3 label-nobr">

src/app/composants/chat/chat.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { timer } from 'rxjs';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faComment } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { MessageShort } from '../../interfaces/chat';
@@ -9,11 +11,12 @@ import { PseudonymeList } from '../../interfaces/participant';
 import { ChatService } from '../../services/chat.service';
 import { AccountService } from '../../services/account.service'
 
-@Component({ selector: 'app-chat', imports: [FormsModule, MenuComponent], templateUrl: './chat.component.html', styleUrl: './chat.component.css' })
+@Component({ selector: 'app-chat', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './chat.component.html', styleUrl: './chat.component.css' })
 
 export class ChatComponent implements OnInit
 {
-
+  faComment = faComment;
+  
   logged: boolean = false;
   disabled: boolean = false;
 

src/app/composants/login/login.component.html

@@ -38,7 +38,7 @@
 
 		</div>
 		<div class="card-footer" #menu_login>
-			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-right-to-bracket"></i>&nbsp;<span i18n>Login</span></button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><fa-icon [icon]="faRightToBracket"></fa-icon>&nbsp;<span i18n>Login</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/login/login.component.ts

@@ -1,17 +1,20 @@
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm, NgModel } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faRightToBracket } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { AccountService } from '../../services/account.service'
 import { User } from '../../interfaces/user';
 import { Journees } from '../../interfaces/divers';
 
-@Component({ selector: 'app-login', imports: [FormsModule, MenuComponent], templateUrl: './login.component.html', styleUrl: './login.component.css' })
+@Component({ selector: 'app-login', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './login.component.html', styleUrl: './login.component.css' })
 
 export class LoginComponent implements OnInit
 {
-
+  faRightToBracket = faRightToBracket;
+  
   hello: Journees = new Journees();
 
   @ViewChild('formRef') loginForm!: NgForm;

src/app/composants/menu/menu.component.css

@@ -19,5 +19,3 @@
   #sidenav ul { display: inline-block; }
   #sidenav ul li { float: left; border-bottom: none; }
 }
-
-.fa { text-rendering: optimizeLegibility; }

src/app/composants/menu/menu.component.html

@@ -2,10 +2,10 @@
 
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
-		<li><a routerLink="/login" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Login" placement="right" container="body"><i class="fa-solid fa-right-to-bracket"></i></a></li>
-		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
-		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+    <li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><fa-icon [icon]="faHome"></fa-icon></a></li>
+		<li><a routerLink="/login" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Login" placement="right" container="body"><fa-icon [icon]="faRightToBracket"></fa-icon></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><fa-icon [icon]="faClock"></fa-icon></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><fa-icon [icon]="faEye"></fa-icon></a></li>
 	</ul>
 </div><div #signouticon class="d-none"></div>
 
@@ -13,17 +13,17 @@
 
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
-		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
-    <li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><i #signouticon class="fa-solid fa-right-from-bracket"></i></a></li>
-		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
-		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><fa-icon [icon]="faHome"></fa-icon></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><fa-icon [icon]="faUser"></fa-icon></a></li>
+    <li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><fa-icon #signouticon [icon]="faRightFromBracket"></fa-icon></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><fa-icon [icon]="faClock"></fa-icon></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><fa-icon [icon]="faEye"></fa-icon></a></li>
 
-		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><fa-icon [icon]="faComments"></fa-icon></a></li>
 
-    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
-		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
-		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><fa-icon [icon]="faSave"></fa-icon></a></li>
+		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><fa-icon [icon]="faVoteYea"></fa-icon></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><fa-icon [icon]="faTrophy"></fa-icon></a></li>
 
 	</ul>
 </div>
@@ -32,19 +32,19 @@
 
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
-		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
-		<li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><i #signouticon class="fa-solid fa-right-from-bracket"></i></a></li>
-		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
-		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><fa-icon [icon]="faHome"></fa-icon></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><fa-icon [icon]="faUser"></fa-icon></a></li>
+		<li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><fa-icon #signouticon [icon]="faRightFromBracket"></fa-icon></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><fa-icon [icon]="faClock"></fa-icon></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><fa-icon [icon]="faEye"></fa-icon></a></li>
 
-		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><fa-icon [icon]="faComments"></fa-icon></a></li>
 
-    <li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
+    <li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Participants" placement="right" container="body"><fa-icon [icon]="faUsers"></fa-icon></a></li>
 
-    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
-		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
-		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><fa-icon [icon]="faSave"></fa-icon></a></li>
+		<li><a routerLink="/vote-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><fa-icon [icon]="faVoteYea"></fa-icon></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><fa-icon [icon]="faTrophy"></fa-icon></a></li>
 	</ul>
 </div>
 
@@ -52,23 +52,23 @@
 
 <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" id="sidenav">
   <ul class="nav nav-pills nav-flush flex-column text-center">
-	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><i class="fa-solid fa-home"></i></a></li>
-		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><i class="fa-solid fa-user"></i></a></li>
-		<li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><i #signouticon class="fa-solid fa-right-from-bracket"></i></a></li>
-		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><i class="fa-solid fa-clock"></i></a></li>
-		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><i class="fa-solid fa-eye"></i></a></li>
+	 	<li><a routerLink="/home" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Accueil" placement="right" container="body"><fa-icon [icon]="faHome"></fa-icon></a></li>
+		<li><a routerLink="/account-details" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Compte" placement="right" container="body"><fa-icon [icon]="faUser"></fa-icon></a></li>
+		<li><a routerLinkActive="active" data-bs-toggle="modal" data-bs-target="#modalDeconnecter" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Logout" placement="right" container="body"><fa-icon #signouticon [icon]="faRightFromBracket"></fa-icon></a></li>
+		<li><a routerLink="/event-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Planning" placement="right" container="body"><fa-icon [icon]="faClock"></fa-icon></a></li>
+		<li><a routerLink="/webcam-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Caméras" placement="right" container="body"><fa-icon [icon]="faEye"></fa-icon></a></li>
 
-		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><i class="fa-solid fa-comments"></i></a></li>
+		<li><a routerLink="/chat" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Messagerie" placement="right" container="body"><fa-icon [icon]="faComments"></fa-icon></a></li>
 
-    <li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Participants" placement="right" container="body"><i class="fa-solid fa-users"></i></a></li>
+    <li><a routerLink="/participant-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Participants" placement="right" container="body"><fa-icon [icon]="faUsers"></fa-icon></a></li>
 
-    <li><a routerLink="/categorie-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Catégories" placement="right" container="body"><i class="fa-solid fa-layer-group"></i></a></li>
-    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><i class="fa-solid fa-save"></i></a></li>
-		<li><a routerLink="/show-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Présentations" placement="right" container="body"><i class="fa-solid fa-display"></i></a></li>
-		<li><a routerLink="/poll-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><i class="fa-solid fa-vote-yea"></i></a></li>
-		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><i class="fa-solid fa-trophy"></i></a></li>
+    <li><a routerLink="/categorie-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Catégories" placement="right" container="body"><fa-icon [icon]="faLayerGroup"></fa-icon></a></li>
+    <li><a routerLink="/production-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Productions" placement="right" container="body"><fa-icon [icon]="faSave"></fa-icon></a></li>
+		<li><a routerLink="/show-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Présentations" placement="right" container="body"><fa-icon [icon]="faDisplay"></fa-icon></a></li>
+		<li><a routerLink="/poll-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Voter" placement="right" container="body"><fa-icon [icon]="faVoteYea"></fa-icon></a></li>
+		<li><a routerLink="/result-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Résultats" placement="right" container="body"><fa-icon [icon]="faTrophy"></fa-icon></a></li>
 
-    <li><a routerLink="/variable-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Paramétrages" placement="right" container="body"><i class="fa-solid fa-sliders-h"></i></a></li>
+    <li><a routerLink="/variable-list" routerLinkActive="active" class="nav-link rounded-0 bg-gradient" i18n-tooltip tooltip="Paramétrages" placement="right" container="body"><fa-icon [icon]="faSlidersH"></fa-icon></a></li>
 	</ul>
 </div>
 

src/app/composants/menu/menu.component.ts

@@ -2,15 +2,19 @@ import { Injectable, Component, OnInit, ViewChild, ElementRef, Renderer2 } from
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { DEFAULT_INTERRUPTSOURCES, Idle } from '@ng-idle/core';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faHome, faRightToBracket, faClock, faEye, faUser, faRightFromBracket, faComments, faSave, faVoteYea, faTrophy, faUsers, faLayerGroup, faDisplay, faSlidersH } from '@fortawesome/free-solid-svg-icons';
 
 import { AccountService } from '../../services/account.service';
 
-@Component({ selector: 'app-menu', imports: [TooltipModule, RouterLink, RouterLinkActive], templateUrl: './menu.component.html', styleUrl: './menu.component.css' })
+@Component({ selector: 'app-menu', imports: [FontAwesomeModule, TooltipModule, RouterLink, RouterLinkActive], templateUrl: './menu.component.html', styleUrl: './menu.component.css' })
 
 @Injectable({ providedIn: 'root' })
 
 export class MenuComponent implements OnInit
 {
+  faHome = faHome; faRightToBracket = faRightToBracket; faClock = faClock; faEye = faEye; faUser = faUser; faRightFromBracket = faRightFromBracket; faComments = faComments;
+  faSave = faSave; faTrophy = faTrophy; faVoteYea = faVoteYea; faUsers = faUsers; faLayerGroup = faLayerGroup; faDisplay = faDisplay; faSlidersH = faSlidersH;
 
   logged: boolean = false;
   role: string = "";

src/app/composants/participant-create/participant-create.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Fiche d'un participant</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body form-scrollable">
 
@@ -231,7 +231,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/participant-create/participant-create.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPlus } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ProfilList, ParticipantStatutList, ParticipantModePaiementList } from '../../interfaces/participant';
@@ -9,10 +11,11 @@ import { ParticipantService } from '../../services/participant.service';
 import { DiversService } from '../../services/divers.service'
 import { AccountService } from '../../services/account.service';
 
-@Component({ selector: 'app-participant-create', imports: [FormsModule, MenuComponent], templateUrl: './participant-create.component.html', styleUrl: './participant-create.component.css' })
+@Component({ selector: 'app-participant-create', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './participant-create.component.html', styleUrl: './participant-create.component.css' })
 
 export class ParticipantCreateComponent implements OnInit
 {
+  faXmark = faXmark; faPlus = faPlus;
 
   profil: string = "";
   profils: ParticipantEnum[] = ProfilList;

src/app/composants/participant-details/participant-details.component.html

@@ -3,7 +3,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'un participant</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body form-scrollable">
 
@@ -236,7 +236,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Editer</span></button>
+		<button type="button" (click)="updateParticipant(participant.numeroParticipant)" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Editer</span></button>
 	</div>
 </div>
 </div>

src/app/composants/participant-details/participant-details.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ProfilList, ParticipantStatutList, ParticipantModePaiementList } from '../../interfaces/participant';
@@ -9,10 +11,11 @@ import { Journees } from '../../interfaces/divers';
 import { DiversService } from '../../services/divers.service'
 import { AccountService } from '../../services/account.service';
 
-@Component({ selector: 'app-participant-details', imports: [FormsModule, MenuComponent], templateUrl: './participant-details.component.html', styleUrl: './participant-details.component.css' })
+@Component({ selector: 'app-participant-details', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './participant-details.component.html', styleUrl: './participant-details.component.css' })
 
 export class ParticipantDetailsComponent implements OnInit
 {
+  faXmark = faXmark; faPen = faPen;
 
   profil: string = "";
   profils: ParticipantEnum[] = ProfilList;

src/app/composants/participant-list/participant-list.component.html

@@ -17,7 +17,7 @@
 		  </div>
 		  <div class="form-group col-sm-2 label-nobr">
 			  <div class="input-group input-group-sn">
-				  <button type="button" (click)="filtrageParNom()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-filter"></i>&nbsp;<span i18n>Filtrer</span></button>
+				  <button type="button" (click)="filtrageParNom()" class="btn bg-gradient btn-primary btn-sm field-separate"><fa-icon [icon]="faFilter"></fa-icon>&nbsp;<span i18n>Filtrer</span></button>
 				  <input type="text" (keydown.enter)="filtrageParNom()" class="form-control form-control-sm field-separate" id="input_nom" [(ngModel)]="nomFiltre" i18n-tooltip tooltip="Filtrer par nom, prenom, pseudonyme ou adresse email" placement="bottom" containor="body">
 			  </div>
 		  </div>
@@ -41,16 +41,16 @@
 			  </div>
 		  </div>
 		  <div class="form-group col-sm-2 label-nobr">
-			  <button type="button" (click)="filtrageReset()" class="btn bg-gradient btn-secondary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-filter-circle-xmark"></i>&nbsp;<span i18n>Retirer les filtres</span></button>
+			  <button type="button" (click)="filtrageReset()" class="btn bg-gradient btn-secondary btn-sm field-separate" style="margin-right: 5px;"><fa-icon [icon]="faFilterCircleXmark"></fa-icon>&nbsp;<span i18n>Retirer les filtres</span></button>
 		  </div>
 		</div>
 	</div>
 	<div class="card-header shadow-sm">
 		<div class="row justify-content-start">
 			<div class="form-group col-sm-2 label-nobr">
-				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
-				<button type="button" (click)="topperArrives()" class="btn bg-gradient btn-primary btn-sm field-separate disabled" style="margin-right: 5px;" #boutonSetArrives i18n-tooltip tooltip="Déclarer les participants sélectionnés comme arrivés" placement="bottom" containor="body"><i class="fa-solid fa-flag-checkered"></i>&nbsp;<span i18n>Sont arrivés</span></button>
+				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
+				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;" style="margin-right: 5px;"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
+				<button type="button" (click)="topperArrives()" class="btn bg-gradient btn-primary btn-sm field-separate disabled" style="margin-right: 5px;" #boutonSetArrives i18n-tooltip tooltip="Déclarer les participants sélectionnés comme arrivés" placement="bottom" containor="body"><fa-icon [icon]="faFlagCheckered"></fa-icon>&nbsp;<span i18n>Sont arrivés</span></button>
 			</div>
    	</div>
 	</div>
@@ -74,19 +74,19 @@
 					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.nom }}&nbsp;{{ participant.prenom }}</a>&nbsp;&nbsp;</td>
 					<td class="label-nobr text-truncate" style="max-width:200px;"><a (click)="formParticipant(participant.numeroParticipant)" class="link-primary pointeur-souris text-decoration-none">{{ participant.pseudonyme }}</a>@if (participant.groupe) { / {{ participant.groupe }} }&nbsp;&nbsp;</td>
 					<td>
-					  @if (participant.statut === PS[0].key) { <i class="fa-solid fa-circle-xmark text-danger" title="{{ PS[0].value }}"></i> }
-					  @else if (participant.statut === PS[1].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[1].value }}"></i> }
-					  @else if (participant.statut === PS[2].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[2].value }}"></i> }
-					  @else if (participant.statut === PS[3].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[3].value }}"></i> }
-					  @else if (participant.statut === PS[4].key) { <i class="fa-solid fa-circle-check text-success" title="{{ PS[4].value }}"></i> }
-					  @else if (participant.statut === PS[5].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[5].value }}"></i> }
-					  @else if (participant.statut === PS[6].key) { <i class="fa-solid fa-circle-check text-primary" title="{{ PS[6].value }}"></i> }
+						@if (participant.statut === PS[0].key) { <fa-icon [icon]="faCircleXmark" class="text-danger" title="{{ PS[0].value }}"></fa-icon> }
+						@else if (participant.statut === PS[1].key) { <fa-icon [icon]="faCircleCheck" class="text-success" title="{{ PS[1].value }}"></fa-icon> }
+						@else if (participant.statut === PS[2].key) { <fa-icon [icon]="faCircleCheck" class="text-success" title="{{ PS[2].value }}"></fa-icon> }
+						@else if (participant.statut === PS[3].key) { <fa-icon [icon]="faCircleCheck" class="text-success" title="{{ PS[3].value }}"></fa-icon> }
+						@else if (participant.statut === PS[4].key) { <fa-icon [icon]="faCircleCheck" class="text-success" title="{{ PS[4].value }}"></fa-icon> }
+						@else if (participant.statut === PS[5].key) { <fa-icon [icon]="faCircleCheck" class="text-primary" title="{{ PS[5].value }}"></fa-icon> }
+						@else if (participant.statut === PS[6].key) { <fa-icon [icon]="faCircleCheck" class="text-primary" title="{{ PS[6].value }}"></fa-icon> }
 					</td>
 					<td>
-					  @if (participant.arrived) { <i class="fa-solid fa-circle-check text-success"></i> }
-					  @else { <i class="fa-solid fa-circle-xmark text-danger"></i> }&nbsp;&nbsp;
+					  @if (participant.arrived) { <fa-icon [icon]="faCircleCheck" class="text-success"></fa-icon> }
+					  @else { <fa-icon [icon]="faCircleXmark" class="text-danger"></fa-icon> }&nbsp;&nbsp;
 					</td>
-					<td>{{ getNombreJours(participant.hereDay1, participant.hereDay2, participant.hereDay3) }} @if(participant.sleepingOnSite) { + <i class="fa-solid fa-bed"></i> }</td>
+					<td>{{ getNombreJours(participant.hereDay1, participant.hereDay2, participant.hereDay3) }} @if(participant.sleepingOnSite) { + <fa-icon [icon]="faBed"></fa-icon> }</td>
 					<td class="label-nobr">{{ participant.email }}&nbsp;&nbsp;</td>
 				</tr>
 				}
@@ -97,9 +97,9 @@
 	<div class="card-footer" style="max-height:54px;">
 		<nav>
 		  <ul class="pagination">
-				<li class="page-item" [class.disabled]="pagination.pageCourante == 0"><a class="page-link" (click)="goToPrevPage()"><i class="fa-solid fa-arrow-left"></i></a></li>
+				<li class="page-item" [class.disabled]="pagination.pageCourante == 0"><a class="page-link" (click)="goToPrevPage()"><fa-icon [icon]="faArrowLeft"></fa-icon></a></li>
 				@for (p of pages; track p) { <li class="page-item" [class.active]="pagination.pageCourante == (p - 1)"><a class="page-link" (click)="goToPage(p - 1)">{{p}}</a></li> }
-				<li class="page-item" [class.disabled]="pagination.pageCourante == (pagination.nombrePages - 1)"><a class="page-link" (click)="goToNextPage()"><i class="fa-solid fa-arrow-right"></i></a></li>
+				<li class="page-item" [class.disabled]="pagination.pageCourante == (pagination.nombrePages - 1)"><a class="page-link" (click)="goToNextPage()"><fa-icon [icon]="faArrowRight"></fa-icon></a></li>
 		  </ul>
 		</nav>
 	</div>

src/app/composants/participant-list/participant-list.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/co
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPlus, faFilter, faRotate, faFlagCheckered, faFilterCircleXmark, faCircleCheck, faBed, faCircleXmark, faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { ParticipantList, ParticipantEnum, ParticipantStatutList } from '../../interfaces/participant';
@@ -9,10 +11,12 @@ import { ParticipantService } from '../../services/participant.service';
 import { Journees, Pagination } from '../../interfaces/divers';
 import { DiversService } from '../../services/divers.service'
 
-@Component({ selector: 'app-participant-list', imports: [TooltipModule, FormsModule, MenuComponent], templateUrl: './participant-list.component.html', styleUrl: './participant-list.component.css' })
+@Component({ selector: 'app-participant-list', imports: [FontAwesomeModule, TooltipModule, FormsModule, MenuComponent], templateUrl: './participant-list.component.html', styleUrl: './participant-list.component.css' })
 
 export class ParticipantListComponent implements OnInit
 {
+  faPlus = faPlus; faFilter = faFilter; faRotate = faRotate; faFlagCheckered = faFlagCheckered; faFilterCircleXmark = faFilterCircleXmark; faCircleCheck = faCircleCheck; faBed = faBed;
+  faCircleXmark = faCircleXmark; faArrowLeft = faArrowLeft; faArrowRight = faArrowRight;
 
   journees: Journees = new Journees();
 

src/app/composants/participant-update/participant-update.component.html

@@ -4,7 +4,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'un participant</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListParticipant()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body form-scrollable">
 
@@ -252,8 +252,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Modifier</span></button>
-			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;<span i18n>Effacer</span></button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><fa-icon [icon]="faTrash"></fa-icon>&nbsp;<span i18n>Effacer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/participant-update/participant-update.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Participant, ParticipantEnum, ProfilList, ParticipantStatutList, ParticipantModePaiementList } from '../../interfaces/participant';
@@ -9,10 +11,11 @@ import { ParticipantService } from '../../services/participant.service';
 import { DiversService } from '../../services/divers.service'
 import { AccountService } from '../../services/account.service';
 
-@Component({ selector: 'app-participant-update', imports: [FormsModule, MenuComponent], templateUrl: './participant-update.component.html', styleUrl: './participant-update.component.css' })
+@Component({ selector: 'app-participant-update', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './participant-update.component.html', styleUrl: './participant-update.component.css' })
 
 export class ParticipantUpdateComponent implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck; faTrash = faTrash;
 
   profil: string = "";
   profils: ParticipantEnum[] = ProfilList;

src/app/composants/poll-booth/poll-booth.component.html

@@ -6,9 +6,9 @@
     <span i18n>@if (nombreChoixRestant == -1) { Vos votes validés } @else { Voter pour les productions } dans la catégorie {{ categorie.libelle }}</span>
   </div>
   <div class="card-header shadow-sm">
-		<button type="button" (click)="goToListVotes()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
-    @if (nombreChoixRestant != -1) { <button type="button" [disabled]="chosenProductions.length == 0" class="btn bg-gradient btn-danger btn-sm" style="margin-right: 5px;" data-bs-toggle="modal" data-bs-target="#modalValider"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Valider</span></button> }
-    @if (nombreChoixRestant == -1) { <button type="button" disabled class="btn bg-gradient btn-success btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Validé</span></button> }
+		<button type="button" (click)="goToListVotes()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
+    @if (nombreChoixRestant != -1) { <button type="button" [disabled]="chosenProductions.length == 0" class="btn bg-gradient btn-danger btn-sm" style="margin-right: 5px;" data-bs-toggle="modal" data-bs-target="#modalValider"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Valider</span></button> }
+    @if (nombreChoixRestant == -1) { <button type="button" disabled class="btn bg-gradient btn-success btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Validé</span></button> }
 	</div>
   <div class="card-body hstack">
     <div><small><span i18n>Productions préférées</span></small></div>
@@ -44,13 +44,13 @@
 
     <div class="col mx-auto" style="padding:7px;">
       <br/><br/>
-      <button (click)="choisirProduction()" #boutonChoisir class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-left"></i>&nbsp;<span i18n>Choisir</span></button>
+      <button (click)="choisirProduction()" #boutonChoisir class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowLeft"></fa-icon>&nbsp;<span i18n>Choisir</span></button>
       <hr/>
-      <button (click)="ecarterProduction()" #boutonEcarter class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-right"></i>&nbsp;<span i18n>Ecarter</span></button>
+      <button (click)="ecarterProduction()" #boutonEcarter class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowRight"></fa-icon>&nbsp;<span i18n>Ecarter</span></button>
       <br/><br/>
-      <button (click)="avancerProduction()" #boutonAvancer class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-up"></i>&nbsp;<span i18n>Avancer</span></button>
+      <button (click)="avancerProduction()" #boutonAvancer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowUp"></fa-icon>&nbsp;<span i18n>Avancer</span></button>
       <br/><br/>
-      <button (click)="reculerProduction()" #boutonReculer class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-down"></i>&nbsp;<span i18n>Reculer</span></button>
+      <button (click)="reculerProduction()" #boutonReculer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowDown"></fa-icon>&nbsp;<span i18n>Reculer</span></button>
     </div>
 
     <div class="col">

src/app/composants/poll-booth/poll-booth.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck, faArrowLeft, faArrowRight, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
@@ -8,10 +10,11 @@ import { CategorieService } from '../../services/categorie.service';
 import { ProductionChoice, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { BulletinService } from '../../services/bulletin.service';
 
-@Component({ selector: 'app-poll-booth', imports: [FormsModule, MenuComponent], templateUrl: './poll-booth.component.html', styleUrl: './poll-booth.component.css' })
+@Component({ selector: 'app-poll-booth', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './poll-booth.component.html', styleUrl: './poll-booth.component.css' })
 
 export class PollBoothComponent  implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck; faArrowLeft = faArrowLeft; faArrowRight = faArrowRight; faArrowUp = faArrowUp; faArrowDown = faArrowDown;
 
   @ViewChild('boutonChoisir', {static: false}) boutonChoisir!: ElementRef;
   @ViewChild('boutonEcarter', {static: false}) boutonEcarter!: ElementRef;

src/app/composants/poll-list/poll-list.component.html

@@ -5,12 +5,12 @@
   	<div class="card-header shadow-sm">
   		<div class="row">
   			<div class="form-group col-sm-4 label-nobr">
-  				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
+  				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
           @if (this.logged && (this.role === "ADMIN")) {
-          <button type="button" #boutonCloturer class="btn bg-gradient btn-danger btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Fermeture des urnes et validation automatique des choix" placement="right" container="body" data-bs-toggle="modal" data-bs-target="#modalFermerVotes"><i class="fa-solid fa-lock"></i>&nbsp;<span i18n>Clôturer les votes</span></button>
+          <button type="button" #boutonCloturer class="btn bg-gradient btn-danger btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Fermeture des urnes et validation automatique des choix" placement="right" container="body" data-bs-toggle="modal" data-bs-target="#modalFermerVotes"><fa-icon [icon]="faLock"></fa-icon>&nbsp;<span i18n>Clôturer les votes</span></button>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-          <button type="button" #imprimerResultats (click)="getResultatsPDF()" class="btn bg-gradient btn-primary btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger le PDF contenant les résultats pour impression" placement="right" container="body"><i class="fa-solid fa-file-pdf"></i>&nbsp;<span i18n>Imprimer les résultats</span></button>
-          <button type="button" #boutonResultats class="btn bg-gradient btn-danger btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Publier l'ensemble des résultats aux participants" placement="right" container="body" data-bs-toggle="modal" data-bs-target="#modalAfficherResultats"><i class="fa-solid fa-trophy"></i>&nbsp;<span i18n>Afficher les résultats</span></button>
+          <button type="button" #imprimerResultats (click)="getResultatsPDF()" class="btn bg-gradient btn-primary btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger le PDF contenant les résultats pour impression" placement="right" container="body"><fa-icon [icon]="faFilePdf"></fa-icon>&nbsp;<span i18n>Imprimer les résultats</span></button>
+          <button type="button" #boutonResultats class="btn bg-gradient btn-danger btn-sm disabled" style="margin-right: 5px;" i18n-tootip tooltip="Publier l'ensemble des résultats aux participants" placement="right" container="body" data-bs-toggle="modal" data-bs-target="#modalAfficherResultats"><fa-icon [icon]="faTrophy"></fa-icon>&nbsp;<span i18n>Afficher les résultats</span></button>
           }
   			</div>
   		</div>
@@ -22,11 +22,11 @@
           @for (categorie of categories; track categorie.numeroCategorie) { @if (categorie.pollable || (logged && (role === "ADMIN") && categorie.computed)) {
   				<tr>
             <td class="label-nobr fs-3" style="height:30px;vertical-align:center;">
-              <i class="fa-solid fa-list-ol text-body-tertiary"></i>&nbsp; @if (categorie.pollable) { <a (click)="voteCategorie(categorie.numeroCategorie)" class="link-primary pointeur-souris text-decoration-none"> {{ categorie.libelle }} </a> } @else { {{ categorie.libelle }} }
+              <fa-icon [icon]="faListOl" class="text-body-tertiary"></fa-icon>&nbsp; @if (categorie.pollable) { <a (click)="voteCategorie(categorie.numeroCategorie)" class="link-primary pointeur-souris text-decoration-none"> {{ categorie.libelle }} </a> } @else { {{ categorie.libelle }} }
             </td>
             <td class="label-nobr" style="height:30px;vertical-align:center;">
               @if (logged && (role === "ADMIN") && categorie.computed) {
-              <button type="button" (click)="getDiaporama(categorie.numeroCategorie, categorie.libelle)" class="btn bg-gradient btn-primary btn-sm" style="margin-left: 48px;" i18n-tootip tooltip="Télécharger le diaporama HTML contenant les résultats de cette catégorie" placement="right" container="body"><i class="fa-solid fa-file-code"></i>&nbsp;<span i18n>Diaporama</span></button>
+              <button type="button" (click)="getDiaporama(categorie.numeroCategorie, categorie.libelle)" class="btn bg-gradient btn-primary btn-sm" style="margin-left: 48px;" i18n-tootip tooltip="Télécharger le diaporama HTML contenant les résultats de cette catégorie" placement="right" container="body"><fa-icon [icon]="faFileCode"></fa-icon>&nbsp;<span i18n>Diaporama</span></button>
               }
             </td>
   				</tr>

src/app/composants/poll-list/poll-list.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/co
 import { Router, ActivatedRoute } from '@angular/router';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { saveAs } from 'file-saver-es';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faRotate, faFileCode, faLock, faFilePdf, faTrophy, faListOl } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
@@ -9,10 +11,11 @@ import { CategorieService } from '../../services/categorie.service';
 import { AccountService } from '../../services/account.service';
 import { BulletinService } from '../../services/bulletin.service';
 
-@Component({ selector: 'app-poll-list', imports: [TooltipModule, MenuComponent], templateUrl: './poll-list.component.html', styleUrl: './poll-list.component.css' })
+@Component({ selector: 'app-poll-list', imports: [FontAwesomeModule, TooltipModule, MenuComponent], templateUrl: './poll-list.component.html', styleUrl: './poll-list.component.css' })
 
 export class PollListComponent implements OnInit
 {
+  faRotate = faRotate; faFileCode = faFileCode; faLock = faLock; faFilePdf = faFilePdf; faTrophy = faTrophy; faListOl = faListOl;
 
   @ViewChild('boutonCloturer', {static: false}) boutonCloturer!: ElementRef;
   @ViewChild('imprimerResultats', {static: false}) imprimerResultats!: ElementRef;

src/app/composants/production-create/production-create.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Fiche d'une production</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -92,7 +92,7 @@
 
 		</div>
 		<div class="card-footer hstack">
-			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" #boutonUploader type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" #boutonUploader type="submit" [disabled]="formRef.invalid"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 			<div #labelMessage class="form-text" style="padding-left:10px;min-width:300px;"></div>
 		</div>
 	</div>

src/app/composants/production-create/production-create.component.ts

@@ -3,6 +3,8 @@ import { Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { HttpErrorResponse } from '@angular/common/http'
 import * as SparkMD5 from 'spark-md5-es';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPlus, faUpload } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Production, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
@@ -11,10 +13,11 @@ import { ParticipantShort } from '../../interfaces/participant';
 import { ParticipantService } from '../../services/participant.service';
 import { AccountService } from '../../services/account.service'
 
-@Component({ selector: 'app-production-create', imports: [FormsModule, MenuComponent], templateUrl: './production-create.component.html', styleUrl: './production-create.component.css' })
+@Component({ selector: 'app-production-create', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './production-create.component.html', styleUrl: './production-create.component.css' })
 
 export class ProductionCreateComponent implements OnInit
 {
+  faXmark = faXmark; faPlus = faPlus; faUpload = faUpload;
 
   participants: ParticipantShort[] = [];
 
@@ -141,8 +144,8 @@ export class ProductionCreateComponent implements OnInit
     });
   }
   private setMessage(m: string, e: boolean) { if (this.labelMessage) { this.renderer.setProperty(this.labelMessage.nativeElement, 'innerHTML', m); if (e) { this.renderer.addClass(this.labelMessage.nativeElement, 'text-danger'); } else { this.renderer.removeClass(this.labelMessage.nativeElement, 'text-danger'); } } }
-  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-plus"></i>&nbsp;' + $localize`Créer`); }  }
+  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faUpload" animation="fade"></fa-icon>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faPlus"></fa-icon>&nbsp;' + $localize`Créer`); }  }
 
   addProduction() { if (this.productionForm.valid) { this.saveProduction(); } }
 

src/app/composants/production-details/production-details.component.html

@@ -3,7 +3,7 @@
 <div class="card shadow center">
 	<div class="card-header"><span i18n>Fiche d'une production</span></div>
 	<div class="card-header shadow-sm">
-		<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body form-scrollable">
 
@@ -84,7 +84,7 @@
 		<div class="form-group row">
 			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Archive</span></label>
 			<div class="col-sm-8">
-				<button type="button" (click)="updateArchive(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-upload"></i>&nbsp;<span i18n>Téléverser</span></button>
+				<button type="button" (click)="updateArchive(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm field-separate"><fa-icon [icon]="faUpload"></fa-icon>&nbsp;<span i18n>Téléverser</span></button>
 				<small class="text-muted">&nbsp;&nbsp;<span i18n>déjà enregistré :</span> {{ production.nomArchive }} (v{{ production.numeroVersion }})</small>
 			</div>
 		</div>
@@ -99,7 +99,7 @@
 
 	</div>
 	<div class="card-footer">
-		<button type="button" (click)="updateProduction(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Editer</span></button>
+		<button type="button" (click)="updateProduction(production.numeroProduction)" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Editer</span></button>
 	</div>
 </div>
 </div>

src/app/composants/production-details/production-details.component.ts

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen, faUpload } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 
-@Component({ selector: 'app-production-details', imports: [FormsModule, MenuComponent], templateUrl: './production-details.component.html', styleUrl: './production-details.component.css' })
+@Component({ selector: 'app-production-details', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './production-details.component.html', styleUrl: './production-details.component.css' })
 
 export class ProductionDetailsComponent implements OnInit
 {
+  faXmark = faXmark; faPen = faPen; faUpload = faUpload;
 
   numeroProduction: number = 0;
 

src/app/composants/production-list/production-list.component.html

@@ -5,8 +5,8 @@
 	<div class="card-header shadow">
 		<div class="row justify-content-between">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-				<button type="button" (click)="goToNewProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+				<button type="button" (click)="goToRefreshListProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
+				<button type="button" (click)="goToNewProduction()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 			</div>
 			<div class="form-group col-sm-2 label-nobr ms-auto">
 				<div class="input-group input-group-sn">
@@ -42,7 +42,7 @@
 				@else if (production.type === types[4].key) { <img src="default/topic.png" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)"> }
 				@else if (production.type === types[5].key) { <img src="default/autre.png" class="img-fluid card-img-top pointeur-souris" (click)="formProduction(production.numeroProduction)"> }
 				<div class="card-header border-top border-dark-subtle" style="max-height:10rem;overflow:auto;">
-					<span class="card-title">@if (production.type === types[0].key) { <i class="fa-solid fa-square-binary"></i> } @else if (production.type === types[1].key) { <i class="fa-solid fa-image"></i> } @else if (production.type === types[2].key) { <i class="fa-solid fa-music"></i> } @else if (production.type === types[3].key) { <i class="fa-solid fa-video"></i> } @else if (production.type === types[4].key) { <i class="fa-solid fa-comment"></i> } @else { <i class="fa-solid fa-question"></i> }
+					<span class="card-title">@if (production.type === types[0].key) { <fa-icon [icon]="faSquareBinary"></fa-icon> } @else if (production.type === types[1].key) { <fa-icon [icon]="faImage"></fa-icon> } @else if (production.type === types[2].key) { <fa-icon [icon]="faMusic"></fa-icon> } @else if (production.type === types[3].key) { <fa-icon [icon]="faVideo"></fa-icon> } @else if (production.type === types[4].key) { <fa-icon [icon]="faComment"></fa-icon> } @else { <fa-icon [icon]="faQuestion"></fa-icon> }
 					<a (click)="formProduction(production.numeroProduction)" class="text-primary pointeur-souris" style="margin-left:7px;">{{ production.titre }}</a></span><br/>
 					<small><span class="text-muted">par</span> {{ production.auteurs }} @if (production.groupes) { @if (production.groupes.length > 0) { / {{ production.groupes }} } }</small>
 				</div>
@@ -52,8 +52,8 @@
 					 <small class="text-warning">{{ production.informationsPrivees }}</small>
 				 </div>
 				<div class="card-footer mt-auto d-flex justify-content-between">
-					<i class="fa-solid fa-download text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" tooltip="{{ production.nomArchive }} (v{{ production.numeroVersion }})" placement="top" container="body"></i>
-					<i class="fa-solid fa-user-tie text-muted" style="margin-left:7px;" i18n-tootip tooltip="géré par {{ production.nomGestionnaire }}" placement="top" container="body"></i>
+					<fa-icon [icon]="faDownload" class="text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" tooltip="{{ production.nomArchive }} (v{{ production.numeroVersion }})" placement="top" container="body"></fa-icon>
+					<fa-icon [icon]="faUserTie" class="text-muted" style="margin-left:7px;" i18n-tootip tooltip="géré par {{ production.nomGestionnaire }}" placement="top" container="body"></fa-icon>
 				</div>
 			</div>
 		}

src/app/composants/production-list/production-list.component.ts

@@ -3,15 +3,19 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { saveAs } from 'file-saver-es';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPlus, faRotate, faComment, faQuestion, faVideo, faMusic, faImage, faSquareBinary, faDownload, faUserTie } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 
-@Component({ selector: 'app-production-list', imports: [FormsModule, TooltipModule, MenuComponent], templateUrl: './production-list.component.html', styleUrl: './production-list.component.css' })
+@Component({ selector: 'app-production-list', imports: [FontAwesomeModule, FormsModule, TooltipModule, MenuComponent], templateUrl: './production-list.component.html', styleUrl: './production-list.component.css' })
 
 export class ProductionListComponent implements OnInit
 {
+  faPlus = faPlus; faRotate = faRotate; faComment = faComment; faQuestion = faQuestion; faVideo = faVideo; faMusic = faMusic; faImage = faImage; faSquareBinary = faSquareBinary;
+  faDownload = faDownload; faUserTie = faUserTie;
 
   productions: ProductionShort[] = [];
 

src/app/composants/production-update/production-update.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Fiche d'une production</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -96,8 +96,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Modifier</span></button>
-			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;<span i18n>Effacer</span></button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><fa-icon [icon]="faTrash"></fa-icon>&nbsp;<span i18n>Effacer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/production-update/production-update.component.ts

@@ -1,16 +1,20 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
+
 import { MenuComponent } from '../menu/menu.component';
 import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 import { ParticipantShort } from '../../interfaces/participant';
 import { ParticipantService } from '../../services/participant.service';
-import { FormsModule, NgForm } from '@angular/forms';
 
-@Component({ selector: 'app-production-update', imports: [FormsModule, MenuComponent], templateUrl: './production-update.component.html', styleUrl: './production-update.component.css' })
+@Component({ selector: 'app-production-update', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './production-update.component.html', styleUrl: './production-update.component.css' })
 
 export class ProductionUpdateComponent implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck; faTrash = faTrash;
 
   participants: ParticipantShort[] = [];
 

src/app/composants/production-upload/production-upload.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Changement de l'archive d'une production</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListProduction()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -25,7 +25,7 @@
 
 		</div>
 		<div class="card-footer hstack">
-			<button type="button" #boutonUploader class="btn bg-gradient btn-success btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!uploaderFichier"><i class="fa-solid fa-upload"></i>&nbsp;<span i18n>Téléverser</span></button>
+			<button type="button" #boutonUploader class="btn bg-gradient btn-success btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!uploaderFichier"><fa-icon [icon]="faUpload"></fa-icon>&nbsp;<span i18n>Téléverser</span></button>
 			<div #labelMessage class="form-text" style="padding-left:10px;min-width:300px;"></div>
 		</div>
 	</div>

src/app/composants/production-upload/production-upload.component.ts

@@ -3,6 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http'
 import * as SparkMD5 from 'spark-md5-es';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faUpload } from '@fortawesome/free-solid-svg-icons';
 
 import { Environnement } from '../../env';
 import { MenuComponent } from '../menu/menu.component';
@@ -10,10 +12,11 @@ import { ProductionFile } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 import { Message } from '../../interfaces/divers';
 
-@Component({ selector: 'app-production-upload', imports: [FormsModule, MenuComponent], templateUrl: './production-upload.component.html', styleUrl: './production-upload.component.css' })
+@Component({ selector: 'app-production-upload', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './production-upload.component.html', styleUrl: './production-upload.component.css' })
 
 export class ProductionUploadComponent implements OnInit
 {
+  faXmark = faXmark; faUpload = faUpload;
 
   @ViewChild('formRef') productionForm!: NgForm;
   @ViewChild('boutonUploader', {static: false}) boutonUploader!: ElementRef;
@@ -109,8 +112,8 @@ export class ProductionUploadComponent implements OnInit
     }
   }
   private setMessage(m: string, e: boolean) { if (this.labelMessage) { this.renderer.setProperty(this.labelMessage.nativeElement, 'innerHTML', m); if (e) { this.renderer.addClass(this.labelMessage.nativeElement, 'text-danger'); } else { this.renderer.removeClass(this.labelMessage.nativeElement, 'text-danger'); } } }
-  private setBoutonUploadStart() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload"></i>&nbsp;' + $localize`Téléverser`); }  }
+  private setBoutonUploadStart() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faUpload" animation="fade"></fa-icon>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faUpload"></fa-icon>&nbsp;' + $localize`Téléverser`); }  }
 
   addProductionFile() { this.saveProduction(); }
 

src/app/composants/result-list/result-list.component.html

@@ -5,7 +5,7 @@
   	<div class="card-header shadow-sm">
   		<div class="row">
   			<div class="form-group col-sm-4 label-nobr">
-  				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
+  				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
   			</div>
   		</div>
   	</div>

src/app/composants/result-list/result-list.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { saveAs } from 'file-saver-es';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faRotate } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
@@ -9,11 +11,12 @@ import { CategorieService } from '../../services/categorie.service';
 import { BulletinService } from '../../services/bulletin.service';
 import { ProductionService } from '../../services/production.service';
 
-@Component({ selector: 'app-result-list', imports: [MenuComponent], templateUrl: './result-list.component.html', styleUrl: './result-list.component.css' })
+@Component({ selector: 'app-result-list', imports: [FontAwesomeModule, MenuComponent], templateUrl: './result-list.component.html', styleUrl: './result-list.component.css' })
 
 export class ResultListComponent implements OnInit
 {
-
+  faRotate = faRotate;
+  
   categories: Categorie[] = [];
   nombreVotants: number[] = [];
   productions: ProductionVote[][] = [[]];

src/app/composants/show-links/show-links.component.html

@@ -6,7 +6,7 @@
     <span i18n>Rattacher des productions dans une catégorie</span>
   </div>
   <div class="card-header shadow-sm">
-		<button (click)="goToListPresentations()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+		<button (click)="goToListPresentations()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
   <div class="card-body hstack">
     <div><small><span i18n>Dans {{ categorie.libelle }}</span></small></div>
@@ -24,13 +24,13 @@
 
     <div class="col mx-auto" style="padding:7px;">
       <br/><br/>
-      <button (click)="lierProduction()" #boutonLier class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-left"></i>&nbsp;<span i18n>Lier</span></button>
+      <button (click)="lierProduction()" #boutonLier class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowLeft"></fa-icon>&nbsp;<span i18n>Lier</span></button>
       <hr/>
-      <button (click)="retirerProduction()" #boutonRetirer class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-right"></i>&nbsp;<span i18n>Retirer</span></button>
+      <button (click)="retirerProduction()" #boutonRetirer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowRight"></fa-icon>&nbsp;<span i18n>Retirer</span></button>
       <br/><br/>
-      <button (click)="avancerProduction()" #boutonAvancer class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-up"></i>&nbsp;<span i18n>Avancer</span></button>
+      <button (click)="avancerProduction()" #boutonAvancer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowUp"></fa-icon>&nbsp;<span i18n>Avancer</span></button>
       <br/><br/>
-      <button (click)="reculerProduction()" #boutonReculer class="btn bg-gradient btn-primary btn-sm boutons disabled"><i class="fa-solid fa-arrow-down"></i>&nbsp;<span i18n>Reculer</span></button>
+      <button (click)="reculerProduction()" #boutonReculer class="btn bg-gradient btn-primary btn-sm boutons disabled"><fa-icon [icon]="faArrowDown"></fa-icon>&nbsp;<span i18n>Reculer</span></button>
     </div>
 
     <div class="col">

src/app/composants/show-links/show-links.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faArrowLeft, faArrowRight, faArrowUp, faArrowDown } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
@@ -8,10 +10,11 @@ import { CategorieService } from '../../services/categorie.service';
 import { ProductionItem, ProductionEnum } from '../../interfaces/production';
 import { PresentationService } from '../../services/presentation.service';
 
-@Component({ selector: 'app-show-links', imports: [FormsModule, MenuComponent], templateUrl: './show-links.component.html', styleUrl: './show-links.component.css' })
+@Component({ selector: 'app-show-links', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './show-links.component.html', styleUrl: './show-links.component.css' })
 
 export class ShowLinksComponent implements OnInit
 {
+  faXmark = faXmark; faArrowLeft = faArrowLeft; faArrowRight = faArrowRight; faArrowUp = faArrowUp; faArrowDown = faArrowDown;
 
   @ViewChild('boutonLier', {static: false}) boutonLier!: ElementRef;
   @ViewChild('boutonRetirer', {static: false}) boutonRetirer!: ElementRef;

src/app/composants/show-list/show-list.component.html

@@ -5,8 +5,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-        <button type="button" (click)="getVersionPDF()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger la version PDF de cette page pour impression" placement="right" container="body"><i class="fa-solid fa-file-pdf"></i>&nbsp;<span i18n>Imprimer</span></button>
+				<button type="button" (click)="goToRefreshListCategorie()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
+        <button type="button" (click)="getVersionPDF()" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger la version PDF de cette page pour impression" placement="right" container="body"><fa-icon [icon]="faFilePdf"></fa-icon>&nbsp;<span i18n>Imprimer</span></button>
 			</div>
 		</div>
 	</div>
@@ -17,9 +17,9 @@
   <div class="card-header shadow-sm">
     {{ categorie.libelle }}
     @if (!categorie.pollable && !categorie.computed && !categorie.displayable) { &nbsp;&nbsp;&nbsp;&nbsp;
-      <button type="button" (click)="lierProductions(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Rattacher des productions à cette catégorie et les ordonner" placement="right" container="body"><i class="fa-solid fa-link"></i>&nbsp;<span i18n>Rattacher</span></button>
-      <button type="button" (click)="getDiaporama(categorie.numeroCategorie, categorie.libelle)" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger le fichier HTML de présentations de cette catégorie" placement="right" container="body"><i class="fa-solid fa-file-code"></i>&nbsp;<span i18n>Diaporama</span></button>
-      <button type="button" [disabled]="productions.length == 0" class="btn bg-gradient btn-danger btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Ouvrir le scrutin, après que le présentateur a utilisé le diaporama publiquement" placement="right" container="body" data-bs-toggle="modal" [attr.data-bs-target]="'#modalOuvrirVotes' + categorie.numeroCategorie"><i class="fa-solid fa-check-to-slot"></i>&nbsp;<span i18n>Ouvrir les votes</span></button>
+      <button type="button" (click)="lierProductions(categorie.numeroCategorie)" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Rattacher des productions à cette catégorie et les ordonner" placement="right" container="body"><fa-icon [icon]="faLink"></fa-icon>&nbsp;<span i18n>Rattacher</span></button>
+      <button type="button" (click)="getDiaporama(categorie.numeroCategorie, categorie.libelle)" class="btn bg-gradient btn-primary btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Télécharger le fichier HTML de présentations de cette catégorie" placement="right" container="body"><fa-icon [icon]="faFileCode"></fa-icon>&nbsp;<span i18n>Diaporama</span></button>
+      <button type="button" [disabled]="productions.length == 0" class="btn bg-gradient btn-danger btn-sm" style="margin-right: 5px;" i18n-tootip tooltip="Ouvrir le scrutin, après que le présentateur a utilisé le diaporama publiquement" placement="right" container="body" data-bs-toggle="modal" [attr.data-bs-target]="'#modalOuvrirVotes' + categorie.numeroCategorie"><fa-icon [icon]="faCheckToSlot"></fa-icon>&nbsp;<span i18n>Ouvrir les votes</span></button>
     }
     @if (categorie.uploadable) { }
     @if (categorie.pollable) { <span i18n> : le scrutin est ouvert. </span> }
@@ -46,11 +46,11 @@
         <small class="text-warning">{{ production.informationsPrivees }}</small>
       </div>
       <div class="card-footer mt-auto d-flex justify-content-between" [class.border-danger]="production.etatMedia === 0">
-        <i class="fa-solid fa-download text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" tooltip="{{ production.nomArchive }} (v{{ production.numeroVersion }})" placement="top" container="body"></i>
-        <i class="fa-solid fa-user-tie text-muted" style="margin-left:7px;" i18n-tootip tooltip="géré par {{ production.nomGestionnaire }}" placement="top" container="body"></i>
-        @if (production.etatMedia === 0) { <i class="fa-solid fa-square-xmark text-danger ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="nécessite le média pour présentation" placement="top" container="body"></i> }
-        @else if (production.etatMedia === 1) { <i class="fa-solid fa-square-check text-success ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="média présent" placement="top" container="body"></i> }
-        @else if (production.etatMedia === 2) { <i class="fa-solid fa-square-arrow-up-right text-success ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="média hors fichier de présentation" placement="top" container="body"></i> }
+        <fa-icon [icon]="faDownload" class="text-primary pointeur-souris" (click)="getFile(production.numeroProduction, production.nomArchive)" tooltip="{{ production.nomArchive }} (v{{ production.numeroVersion }})" placement="top" container="body"></fa-icon>
+        <fa-icon [icon]="faUserTie" class="text-muted" style="margin-left:7px;" i18n-tootip tooltip="géré par {{ production.nomGestionnaire }}" placement="top" container="body"></fa-icon>
+        @if (production.etatMedia === 0) { <fa-icon [icon]="faSquareXmark" class="text-danger ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="nécessite le média pour présentation" placement="top" container="body"></fa-icon> }
+        @else if (production.etatMedia === 1) { <fa-icon [icon]="faSquareCheck" class="text-success ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="média présent" placement="top" container="body"></fa-icon> }
+        @else if (production.etatMedia === 2) { <fa-icon [icon]="faSquareArrowUpRight" class="text-success ms-auto pointeur-souris" style="margin-left:7px;" (click)="formPresentation(production.numeroProduction)" i18n-tootip tooltip="média hors fichier de présentation" placement="top" container="body"></fa-icon> }
       </div>
     </div>
 } }

src/app/composants/show-list/show-list.component.ts

@@ -3,6 +3,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { saveAs } from 'file-saver-es';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faRotate, faFileCode, faFilePdf, faCheckToSlot, faLink, faDownload, faUserTie, faSquareXmark, faSquareCheck, faSquareArrowUpRight } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { Categorie } from '../../interfaces/categorie';
@@ -12,10 +14,12 @@ import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../inter
 import { PresentationService } from '../../services/presentation.service';
 import { ProductionService } from '../../services/production.service';
 
-@Component({ selector: 'app-show-list', imports: [FormsModule, TooltipModule, MenuComponent], templateUrl: './show-list.component.html', styleUrl: './show-list.component.css' })
+@Component({ selector: 'app-show-list', imports: [FontAwesomeModule, FormsModule, TooltipModule, MenuComponent], templateUrl: './show-list.component.html', styleUrl: './show-list.component.css' })
 
 export class ShowListComponent implements OnInit
 {
+  faRotate = faRotate; faFileCode = faFileCode; faFilePdf = faFilePdf; faCheckToSlot = faCheckToSlot; faLink = faLink; faDownload = faDownload; faUserTie = faUserTie;
+  faSquareXmark = faSquareXmark; faSquareCheck = faSquareCheck; faSquareArrowUpRight = faSquareArrowUpRight;
 
   categories: Categorie[] = [];
 

src/app/composants/show-upload/show-upload.component.html

@@ -5,7 +5,7 @@
   <div class="card shadow center">
     <div class="card-header"><span i18n>Choix du média pour la présentation d'une production</span></div>
   	<div class="card-header shadow-sm">
-  		<button (click)="goToListPresentation()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+  		<button (click)="goToListPresentation()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
   	</div>
   	<div class="card-body form-scrollable">
 
@@ -117,8 +117,8 @@
 
   	</div>
   	<div class="card-footer hstack">
-      @if (etatInitial === 0) { <button type="button" #boutonUploader class="btn bg-gradient btn-success btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Valider</span></button> }
-      @else { <button type="button" #boutonUploader class="btn bg-gradient btn-warning btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Valider</span></button> }
+      @if (etatInitial === 0) { <button type="button" #boutonUploader class="btn bg-gradient btn-success btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Valider</span></button> }
+      @else { <button type="button" #boutonUploader class="btn bg-gradient btn-warning btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Valider</span></button> }
       <div #labelMessage class="form-text text-danger" style="padding-left:10px;min-width:300px;"></div>
   	</div>
   </div>

src/app/composants/show-upload/show-upload.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/co
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule, NgForm } from '@angular/forms';
 import { HttpErrorResponse } from '@angular/common/http'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPlus, faCheck, faUpload } from '@fortawesome/free-solid-svg-icons';
 
 import { MenuComponent } from '../menu/menu.component';
 import { PresentationFile } from '../../interfaces/production';
@@ -10,10 +12,11 @@ import { PresentationService } from '../../services/presentation.service';
 import { ProductionShort, ProductionEnum, ProductionTypeList } from '../../interfaces/production';
 import { ProductionService } from '../../services/production.service';
 
-@Component({ selector: 'app-show-upload', imports: [FormsModule, MenuComponent], templateUrl: './show-upload.component.html', styleUrl: './show-upload.component.css' })
+@Component({ selector: 'app-show-upload', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './show-upload.component.html', styleUrl: './show-upload.component.css' })
 
 export class ShowUploadComponent implements OnInit
 {
+  faXmark = faXmark; faPlus = faPlus; faCheck = faCheck; faUpload = faUpload;
 
   @ViewChild('formRef') productionForm!: NgForm;
   @ViewChild('boutonUploader', {static: false}) boutonUploader!: ElementRef;
@@ -74,8 +77,8 @@ export class ShowUploadComponent implements OnInit
     });
   }
   private setMessage(m: string) { if (this.labelMessage) { this.renderer.setProperty(this.labelMessage.nativeElement, 'innerHTML', m); } }
-  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-upload fa-fade"></i>&nbsp;' + $localize`Téléversement en cours`); } }
-  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<i class="fa-solid fa-check"></i>&nbsp;' + $localize`Valider`); }  }
+  private setBoutonUploadStart() { if (this.boutonUploader && this.uploaderFichier) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faUpload" animation="fade"></fa-icon>&nbsp;' + $localize`Téléversement en cours`); } }
+  private setBoutonUploadEnd() { if (this.boutonUploader) { this.renderer.setProperty(this.boutonUploader.nativeElement, 'innerHTML', '<fa-icon [icon]="faCheck"></fa-icon>&nbsp;' + $localize`Valider`); }  }
 
   addPresentationFile() { this.saveMedia(); }
 

src/app/composants/variable-create/variable-create.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Fiche d'une variable</span></div>
 		<div class="card-header shadow-sm">
-			<button (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -38,7 +38,7 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+			<button type="button" class="btn bg-gradient btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/variable-create/variable-create.component.ts

@@ -1,14 +1,18 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
+import { FormsModule, NgForm, NgModel } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPlus } from '@fortawesome/free-solid-svg-icons';
+
+import { MenuComponent } from '../menu/menu.component';
 import { Variable } from '../../interfaces/variable';
 import { VariableService } from '../../services/variable.service';
-import { MenuComponent } from '../menu/menu.component';
-import { FormsModule, NgForm, NgModel } from '@angular/forms';
 
-@Component({ selector: 'app-variable-create', imports: [FormsModule, MenuComponent], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
+@Component({ selector: 'app-variable-create', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './variable-create.component.html', styleUrl: './variable-create.component.css' })
 
 export class VariableCreateComponent implements OnInit
 {
+  faXmark = faXmark; faPlus = faPlus;
 
   @ViewChild('formRef') variableForm!: NgForm;
   @ViewChild('typeRef') typeField!: NgModel;

src/app/composants/variable-details/variable-details.component.html

@@ -3,7 +3,7 @@
 <div class="card shadow center">
   <div class="card-header"><span i18n>Fiche d'une variable</span></div>
 	<div class="card-header shadow-sm">
-    <button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+    <button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 	</div>
 	<div class="card-body">
 
@@ -52,7 +52,7 @@
 
 	</div>
 	<div class="card-footer">
-    <button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-pen"></i>&nbsp;<span i18n>Editer</span></button>
+    <button type="button" (click)="updateVariable(variable.numeroVariable)" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Editer</span></button>
 	</div>
 </div>
 </div>

src/app/composants/variable-details/variable-details.component.ts

@@ -1,14 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faPen } from '@fortawesome/free-solid-svg-icons';
+
 import { MenuComponent } from '../menu/menu.component';
 import { Variable } from '../../interfaces/variable';
 import { VariableService } from '../../services/variable.service';
-import { FormsModule } from '@angular/forms';
 
-@Component({ selector: 'app-variable-details', imports: [FormsModule, MenuComponent], templateUrl: './variable-details.component.html', styleUrl: './variable-details.component.css' })
+@Component({ selector: 'app-variable-details', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './variable-details.component.html', styleUrl: './variable-details.component.css' })
 
 export class VariableDetailsComponent implements OnInit
 {
+  faXmark = faXmark; faPen = faPen;
 
   numeroVariable: number = 0;
 

src/app/composants/variable-list/variable-list.component.html

@@ -5,8 +5,8 @@
 	<div class="card-header shadow-sm">
 		<div class="row justify-content-between">
 			<div class="form-group col-sm-4 label-nobr">
-				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+				<button type="button" (click)="goToRefreshListVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><fa-icon [icon]="faRotate"></fa-icon>&nbsp;<span i18n>Actualiser</span></button>
+				<button type="button" (click)="goToNewVariable()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n>Créer</span></button>
 			</div>
   		<div class="form-group col-sm-2 label-nobr">
 				<div class="input-group input-group-sn">

src/app/composants/variable-list/variable-list.component.ts

@@ -1,14 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faPlus, faRotate } from '@fortawesome/free-solid-svg-icons';
+
 import { MenuComponent } from '../menu/menu.component';
 import { Variable, VariableType } from '../../interfaces/variable';
 import { VariableService } from '../../services/variable.service';
-import { FormsModule, NgForm } from '@angular/forms';
 
-@Component({ selector: 'app-variable-list', imports: [FormsModule, MenuComponent], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
+@Component({ selector: 'app-variable-list', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './variable-list.component.html', styleUrl: './variable-list.component.css' })
 
 export class VariableListComponent implements OnInit
 {
+  faPlus = faPlus; faRotate = faRotate;
 
   types: VariableType[] = [];
   typeFiltre: string = "";

src/app/composants/variable-update/variable-update.component.html

@@ -4,7 +4,7 @@
 	<div class="card shadow center">
 		<div class="card-header"><span i18n>Fiche d'une variable</span></div>
 		<div class="card-header shadow-sm">
-			<button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;<span i18n>Retour</span></button>
+			<button type="button" (click)="goToListVariable()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
 		</div>
 		<div class="card-body">
 
@@ -53,8 +53,8 @@
 
 		</div>
 		<div class="card-footer">
-			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><i class="fa-solid fa-check"></i>&nbsp;<span i18n>Modifier</span></button>
-			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><i class="fa-solid fa-trash"></i>&nbsp;<span i18n>Effacer</span></button>
+			<button type="button" class="btn bg-gradient btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="formRef.invalid"><fa-icon [icon]="faCheck"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
+			<button type="button" class="btn bg-gradient btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#modalEffacer" style="float: right;"><fa-icon [icon]="faTrash"></fa-icon>&nbsp;<span i18n>Effacer</span></button>
 		</div>
 	</div>
 </form>

src/app/composants/variable-update/variable-update.component.ts

@@ -1,14 +1,18 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { FormsModule, NgForm } from '@angular/forms';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faXmark, faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
+
 import { MenuComponent } from '../menu/menu.component';
 import { Variable } from '../../interfaces/variable';
 import { VariableService } from '../../services/variable.service';
-import { FormsModule, NgForm } from '@angular/forms';
 
-@Component({ selector: 'app-variable-update', imports: [FormsModule, MenuComponent], templateUrl: './variable-update.component.html', styleUrl: './variable-update.component.css' })
+@Component({ selector: 'app-variable-update', imports: [FontAwesomeModule, FormsModule, MenuComponent], templateUrl: './variable-update.component.html', styleUrl: './variable-update.component.css' })
 
 export class VariableUpdateComponent implements OnInit
 {
+  faXmark = faXmark; faCheck = faCheck; faTrash = faTrash;
 
   @ViewChild('formRef') variableForm!: NgForm;