[ACS-8630] - Replacing mat-icon elements

lib/content-services/src/lib/mat-selectors.scss

@@ -1,6 +1,5 @@
 /* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */
 
-$mat-icon: '.mat-icon';
 $mat-focused: '.mat-focused';
 $mat-line: '.mat-line';
 $mat-tab-label: '.mat-mdc-tab';

lib/core/src/lib/form/components/form-renderer.component.html

@@ -120,7 +120,7 @@
                                         [matTooltip]="'FORM.FORM_RENDERER.DELETE_ROW' | translate"
                                         (click)="displayDialogToRemoveRow(currentRootElement.field, rowIndex)"
                                     >
-                                        <mat-icon adf-icon="close" />
+                                        <mat-icon class="adf-grid-list-row-remove-button-icon" adf-icon="close" />
                                     </button>
                                 }
                             </div>

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -93,7 +93,7 @@
                 align-items: center;
                 justify-content: center;
 
-                #{ms.$mat-icon} {
+                .adf-grid-list-row-remove-button-icon {
                     display: flex;
                     justify-content: center;
                     align-items: center;

lib/core/src/lib/info-drawer/info-drawer.component.html

@@ -18,7 +18,7 @@
                 class="adf-info-drawer-tab">
 
                 <ng-template mat-tab-label>
-                    <mat-icon *ngIf="contentBlock.icon" [adf-icon]="contentBlock.icon" />
+                    <mat-icon *ngIf="contentBlock.icon" class="adf-info-drawer-tab-icon" [adf-icon]="contentBlock.icon" />
                     <span *ngIf="contentBlock.label">{{ contentBlock.label | translate }}</span>
                 </ng-template>
 

lib/core/src/lib/info-drawer/info-drawer.component.scss

@@ -43,7 +43,7 @@
                     #{ms.$mat-tab-label-text} {
                         flex-grow: 1;
 
-                        #{ms.$mat-icon} + span {
+                        .adf-info-drawer-tab-icon + span {
                             padding-left: 5px;
                         }
                     }

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -32,6 +32,8 @@
     }
 
     .adf-layout-container-sidenav {
+        // Icons here are projected by the consuming app via <ng-content>,
+        // so ADF cannot attach its own class to them.
         #{ms.$mat-icon} {
             vertical-align: sub;
         }

lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html

@@ -21,7 +21,7 @@
                 class="adf-attach-folder-menu-trigger"
             >
                 {{ 'FORM.FIELD.UPLOAD' | translate }}
-                <mat-icon>cloud_upload</mat-icon>
+                <mat-icon class="adf-attach-folder-menu-trigger-icon">cloud_upload</mat-icon>
             </button>
         </div>
     </div>

lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss

@@ -42,7 +42,7 @@
         display: flex;
         flex-direction: row-reverse;
 
-        #{ms.$mat-icon} {
+        .adf-attach-folder-menu-trigger-icon {
             margin-left: 4px;
             margin-right: 0;
         }

lib/process-services/src/lib/styles/mat-selectors.scss

@@ -15,7 +15,6 @@ $mat-button-label: '.mdc-button__label';
 $mat-input-element: '.mat-mdc-input-element';
 $mat-dialog-actions: '.mat-mdc-dialog-actions';
 $mat-line: '.mat-line';
-$mat-icon: '.mat-icon';
 $mat-select-value-text: '.mat-mdc-select-value-text';
 $mat-form-field-label: '.mat-mdc-floating-label';
 $mat-form-field: '.mat-mdc-form-field';