Improve style of close button in dialogs

libs/ui/src/lib/dialog-footer/dialog-footer.component.html

@@ -1,7 +1,10 @@
 @if (deviceType === 'mobile') {
   <div class="d-flex justify-content-center" mat-dialog-actions>
     <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon class="d-block text-body-secondary" name="close-outline" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   </div>
 }

libs/ui/src/lib/dialog-footer/dialog-footer.component.scss

@@ -2,7 +2,6 @@
   display: block;
 
   button[mat-icon-button] {
-    // Show the touch target of 48px, which the density of the theme hides
     --mat-icon-button-touch-target-display: block;
   }
 }

libs/ui/src/lib/dialog-header/dialog-header.component.html

@@ -10,7 +10,10 @@
   >
   @if (deviceType() !== 'mobile') {
     <button mat-icon-button (click)="onClickCloseButton()">
-      <ion-icon class="d-block text-body-secondary" name="close-outline" />
+      <ion-icon
+        class="d-block mat-icon text-body-secondary"
+        name="close-outline"
+      />
     </button>
   }
 </div>

libs/ui/src/lib/dialog-header/dialog-header.component.scss

@@ -2,16 +2,12 @@
   display: block;
 
   button[mat-icon-button] {
-    // Move the button to the corner with the same distance to the top and to the right
     margin-right: -0.8125rem;
-    // Center the button on the title
     margin-top: 0.125rem;
   }
 
   .with-close-button {
     .text-center {
-      // Compensate for the width of the button (1.75rem minus the negative
-      // margin) to center the title in the dialog
       padding-left: 0.9375rem;
     }
   }