Changement avec les mat-icon

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -1,8 +1,20 @@
 <div>
-  <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
+  <form
+    [formGroup]="imgForm"
+    (ngSubmit)="onSubmit(imgForm.value)"
+    autocomplete="off"
+    style="padding: 10px"
+  >
     <p>
-      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
-        (change)="onFileChanged($event)" />
+      <input
+        type="file"
+        #fileUpload
+        id="fileUpload"
+        name="fileUpload"
+        accept="image/*"
+        formControlName="image"
+        (change)="onFileChanged($event)"
+      />
     </p>
     <p>
       <mat-form-field>
@@ -12,7 +24,7 @@
     </p>
 
     <button mat-icon-button color="warn" type="submit">
-      <mat-icon>file_upload</mat-icon>
+      <mat-icon svgIcon="file_upload"></mat-icon>
       Upload image
     </button>
     <label>{{ imageError }}</label>
@@ -22,28 +34,54 @@
 <div *ngIf="resultsLength > 0">
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="comment">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th>
-      <td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td>
+      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+        Comments
+      </th>
+      <td mat-cell *matCellDef="let element" style="text-align: left">
+        <span style="white-space: nowrap">{{ element.comment }}</span>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="data">
-      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
-      <td mat-cell *matCellDef="let element" style="text-align: center;">
-        <img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)" class="cursor">
+      <th mat-header-cell *matHeaderCellDef style="text-align: center">
+        Image
+      </th>
+      <td mat-cell *matCellDef="let element" style="text-align: center">
+        <img
+          src="{{ element.data }}"
+          alt="image"
+          style="width: 50%"
+          (click)="openModal(element)"
+          class="cursor"
+        />
       </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
 
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 </div>
 
-<div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
+<div
+  class="imgmodal"
+  [ngStyle]="{ display: showPopin === true ? 'block' : 'none' }"
+>
   <span class="close cursor" (click)="closeModal()">&times;</span>
-  <mat-icon aria-hidden="false" aria-label="Rotation" (click)="rotate()" class="rotate cursor">undo</mat-icon>
+  <mat-icon
+    aria-hidden="false"
+    aria-label="Rotation"
+    (click)="rotate()"
+    class="rotate cursor"
+    svgIcon="undo"
+  ></mat-icon>
   <div class="imgbox">
-    <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()" [@rotatedState]='stateRotation'>
+    <img
+      class="center-fit cursor"
+      src="{{ popinImage }}"
+      (click)="closeModal()"
+      [@rotatedState]="stateRotation"
+    />
   </div>
 </div>