AAE-40911 Add adf-icon to core lib (#11471)

* AAE-40911 Add adf-icon

* AAE-40911 Add adf-icon directive to remaining core lib components

* AAE-40911 Fix icon name

* AAE-40911 Remove doc change

* AAE-40911 Add icon module

* AAE-40911 Add icon module

* AAE-40911 Fix export

* AAE-40911 Fix export

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.html

@@ -15,7 +15,7 @@
             [title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
             [attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
           >
-            <mat-icon class="adf-breadcrumb__show-all-button-icon--rotate">more_vert</mat-icon >
+            <mat-icon class="adf-breadcrumb__show-all-button-icon--rotate" adf-icon="more_vert" />
           </button>
           <div class="adf-breadcrumb__chevron" [class.adf-breadcrumb__chevron-after--compact]="compact" ></div>
         </li>

lib/core/breadcrumbs/src/components/breadcrumb/breadcrumb.component.ts

@@ -32,18 +32,18 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { map, startWith } from 'rxjs/operators';
 import { TranslatePipe } from '@ngx-translate/core';
 import { BreadcrumbFocusDirective } from '../../directives/breadcrumb-focus.directive';
 import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.component';
+import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-breadcrumb',
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [CommonModule, MatIconModule, TranslatePipe, MatButtonModule, BreadcrumbFocusDirective]
+    imports: [CommonModule, IconModule, TranslatePipe, MatButtonModule, BreadcrumbFocusDirective]
 })
 export class BreadcrumbComponent implements AfterContentInit, OnChanges {
     private _breadcrumbTemplateRefs: Array<TemplateRef<unknown>> = [];

lib/core/feature-flags/src/lib/components/flags/flags.component.html

@@ -8,11 +8,8 @@
   <mat-slide-toggle
     [checked]="isEnabled"
     (change)="onEnable($event.checked)" />
-  <button
+  <button class="adf-feature-flags-overrides-header-close" mat-icon-button mat-dialog-close>
-    class="adf-feature-flags-overrides-header-close"
+    <mat-icon adf-icon="close" />
-    mat-icon-button
-    mat-dialog-close>
-        <mat-icon>close</mat-icon>
   </button>
 </mat-toolbar>
 
@@ -20,7 +17,7 @@
   <table mat-table [dataSource]="flags" class="adf-feature-flags-overrides-table mat-elevation-z0">
     <ng-container matColumnDef="icon">
       <th mat-header-cell class="adf-icon-col adf-header-cell" *matHeaderCellDef>
-        <mat-icon class="material-icons-outlined adf-search-icon">search</mat-icon>
+        <mat-icon class="material-icons-outlined adf-search-icon" adf-icon="search" />
       </th>
       <td mat-cell class="adf-icon-col" *matCellDef="let element">
         <button mat-icon-button *ngIf="element.fictive; else flagFromApi" class="adf-fictive-flag-button" (click)="onDelete(element.flag)">
@@ -46,7 +43,7 @@
             <mat-icon class="material-icons-outlined" fontIcon="add_circle" />
           </button>
           <button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">
-            <mat-icon>cancel</mat-icon>
+            <mat-icon adf-icon="cancel" />
           </button>
         </div>
       </th>
@@ -64,6 +61,6 @@
 </ng-container>
 
 <ng-template #flagFromApi>
-  <mat-icon class="material-icons-outlined">cloud</mat-icon>
+  <mat-icon class="material-icons-outlined" adf-icon="cloud" />
 </ng-template>
 

lib/core/feature-flags/src/lib/components/flags/flags.component.ts

@@ -30,7 +30,6 @@ import { debounceTime, map, take, tap } from 'rxjs/operators';
 import { MatTableModule } from '@angular/material/table';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
@@ -38,6 +37,7 @@ import { FlagsOverrideComponent } from '../feature-override-indicator.component'
 import { MatDialogModule } from '@angular/material/dialog';
 import { TranslatePipe } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-feature-flags-overrides',
@@ -48,7 +48,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
         MatTableModule,
         MatSlideToggleModule,
         MatToolbarModule,
-        MatIconModule,
+        IconModule,
         MatButtonModule,
         MatInputModule,
         MatDialogModule,

lib/core/src/lib/button/button.component.html

@@ -80,7 +80,7 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
+            <mat-icon *ngIf="icon" class="adf-button__icon" [adf-icon]="icon" />
             <ng-container [ngTemplateOutlet]="buttonContent" />
         </button>
     </ng-container>
@@ -98,7 +98,7 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
+            <mat-icon *ngIf="icon" class="adf-button__icon" [adf-icon]="icon" />
             <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent" />
         </button>
     </ng-container>
@@ -116,7 +116,7 @@
             [attr.aria-hidden]="ariaHidden"
             [attr.data-automation-id]="testId"
         >
-            <mat-icon *ngIf="icon" class="adf-button__icon">{{ icon }}</mat-icon>
+            <mat-icon *ngIf="icon" class="adf-button__icon" [adf-icon]="icon" />
             <ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent" />
         </button>
     </ng-container>

lib/core/src/lib/button/button.component.ts

@@ -19,14 +19,14 @@ import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core'
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { ThemePalette } from '@angular/material/core';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 export type ButtonVariant = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | undefined;
 export type ButtonColor = ThemePalette;
 
 @Component({
     selector: 'adf-button',
-    imports: [CommonModule, MatButtonModule, MatIconModule],
+    imports: [CommonModule, MatButtonModule, IconModule],
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.html

@@ -9,7 +9,7 @@
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                     <div class="adf-card-view-array-chip-content">
-                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon" [adf-icon]="item.icon" />
                         <span>{{item?.value}}</span>
                     </div>
                 </mat-chip>
@@ -27,7 +27,7 @@
                     (click)="clicked()"
                     [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                     <div class="adf-card-view-array-chip-content">
-                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                        <mat-icon *ngIf="item?.icon" class="adf-array-item-icon" [adf-icon]="item.icon" />
                         <span>{{item?.value}}</span>
                     </div>
                 </mat-chip>
@@ -41,7 +41,7 @@
                             *ngFor="let item of items.slice(displayCount, items.length)"
                             [attr.data-automation-id]="'card-arrayitem-chip-' + item.value">
                             <div class="adf-card-view-array-chip-content">
-                                <mat-icon *ngIf="item?.icon" class="adf-array-item-icon">{{item.icon}}</mat-icon>
+                                <mat-icon *ngIf="item?.icon" class="adf-array-item-icon" [adf-icon]="item.icon" />
                                 <span>{{item?.value}}</span>
                             </div>
                         </mat-chip>
@@ -60,6 +60,6 @@
         [attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
         [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
         [attr.data-automation-id]="'card-array-item-clickable-icon-' + property.key">
-        <mat-icon class="adf-array-item-button-icon">{{property.icon}}</mat-icon>
+        <mat-icon class="adf-array-item-button-icon" [adf-icon]="property.icon" />
     </button>
 </div>

lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.ts

@@ -21,14 +21,14 @@ import { BaseCardView } from '../base-card-view';
 import { CommonModule } from '@angular/common';
 import { MatChipsModule } from '@angular/material/chips';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-card-view-arrayitem',
-    imports: [CommonModule, MatChipsModule, TranslatePipe, MatIconModule, MatMenuModule, MatCardModule, MatButtonModule],
+    imports: [CommonModule, MatChipsModule, TranslatePipe, IconModule, MatMenuModule, MatCardModule, MatButtonModule],
     templateUrl: './card-view-arrayitem.component.html',
     styleUrls: ['./card-view-arrayitem.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -60,9 +60,8 @@
                 (click)="onDateClear()"
                 [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
                 [attr.data-automation-id]="'datepicker-date-clear-' + property.key"
-            >
+                adf-icon="clear"
-                clear
+            />
-            </mat-icon>
             <mat-datetimepicker-toggle
                 matIconSuffix
                 [attr.tabindex]="-1"
@@ -92,7 +91,7 @@
                 (removed)="removeValueFromList(idx)"
             >
                 {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
+                <mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
             </mat-chip-option>
         </mat-chip-listbox>
 

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -35,13 +35,13 @@ import { isValid } from 'date-fns';
 import { DateFnsUtils } from '../../../common/utils/date-fns-utils';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     providers: [
@@ -54,7 +54,7 @@ import { MatInputModule } from '@angular/material/input';
     imports: [
         CommonModule,
         TranslatePipe,
-        MatIconModule,
+        IconModule,
         MatDatetimepickerModule,
         MatChipsModule,
         MatInputModule,

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.html

@@ -47,7 +47,7 @@
                 mat-icon-button
                 (click)="remove(i)"
                 class="adf-property-col-delete">
-                <mat-icon>close</mat-icon>
+                <mat-icon adf-icon="close" />
             </button>
         </div>
     </div>
@@ -57,7 +57,7 @@
                 class="adf-card-view__key-value-pairs__add-btn"
                 [attr.data-automation-id]="'card-key-value-pairs-button-' + property.key">
                 {{ 'CORE.CARDVIEW.KEYVALUEPAIRS.ADD' | translate }}
-                <mat-icon>add</mat-icon>
+                <mat-icon adf-icon="add" />
         </button>
     </div>
 </div>

lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.ts

@@ -25,11 +25,11 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-card-view-key-value-pairs-item',
-    imports: [CommonModule, TranslatePipe, MatTableModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
+    imports: [CommonModule, TranslatePipe, MatTableModule, MatInputModule, FormsModule, MatButtonModule, IconModule],
     templateUrl: './card-view-keyvaluepairsitem.component.html',
     styleUrls: ['./card-view-keyvaluepairsitem.component.scss'],
     encapsulation: ViewEncapsulation.None,

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.html

@@ -20,7 +20,7 @@
             *ngIf="term"
             (keydown.enter)="reset($event)"
             (click)="reset()">
-            <mat-icon>close</mat-icon>
+            <mat-icon adf-icon="close" />
         </button>
     </mat-form-field>
 </div>

lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.ts

@@ -22,13 +22,13 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../../../icon/icon.module';
 
 @Component({
     selector: 'adf-select-filter-input',
-    imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule, TranslatePipe],
+    imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, IconModule, TranslatePipe],
     templateUrl: './select-filter-input.component.html',
     styleUrls: ['./select-filter-input.component.scss'],
     host: { class: 'adf-select-filter-input' },

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -78,7 +78,7 @@
         <mat-chip-grid #chipElement class="adf-textitem-chip-list">
             <mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
+                <mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
             </mat-chip-row>
         </mat-chip-grid>
 
@@ -154,7 +154,7 @@
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key"
             >
-                <mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
+                <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
             </button>
         </mat-form-field>
     </div>

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -28,10 +28,10 @@ import { CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../../icon/icon.module';
 
 export const DEFAULT_SEPARATOR = ', ';
 const templateTypes = {
@@ -51,7 +51,7 @@ const templateTypes = {
         MatInputModule,
         ReactiveFormsModule,
         MatChipsModule,
-        MatIconModule,
+        IconModule,
         FormsModule,
         MatButtonModule,
         MatSnackBarModule

lib/core/src/lib/context-menu/context-menu-list.component.html

@@ -7,7 +7,7 @@
                     [disabled]="link.model?.disabled"
                     [title]="link.model?.tooltip | translate"
                     (click)="onMenuItemClick($event, link)">
-                <mat-icon *ngIf="link.model?.icon">{{ link.model.icon }}</mat-icon>
+                <mat-icon *ngIf="link.model?.icon" [adf-icon]="link.model.icon" />
                 <span>{{ link.title || link.model?.title | translate }}</span>
             </button>
         </ng-container>

lib/core/src/lib/context-menu/context-menu-list.component.ts

@@ -22,10 +22,10 @@ import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { contextMenuAnimation } from './animations';
 import { CONTEXT_MENU_DATA } from './context-menu.tokens';
 import { AfterViewInit, Component, HostListener, Inject, Optional, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { NgForOf, NgIf } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-context-menu',
@@ -36,7 +36,7 @@ import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
         class: 'adf-context-menu'
     },
     encapsulation: ViewEncapsulation.None,
-    imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslatePipe],
+    imports: [IconModule, MatMenuModule, NgForOf, NgIf, TranslatePipe],
     animations: [trigger('panelAnimation', contextMenuAnimation)]
 })
 export class ContextMenuListComponent implements AfterViewInit {

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html

@@ -16,17 +16,14 @@
             [attr.aria-label]="'CLOSE' | translate"
             (click)="closeMenu()"
         >
-            <mat-icon>close</mat-icon>
+            <mat-icon adf-icon="close" />
         </button>
     </div>
 
     <mat-divider class="adf-columns-selector-divider" />
 
     <div class="adf-columns-selector-search-input-container">
-        <mat-icon
+        <mat-icon class="adf-columns-selector-search-input-icon" adf-icon="search" />
-            class="adf-columns-selector-search-input-icon">
-            search
-        </mat-icon>
 
         <input
             [formControl]="searchInputControl"

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts

@@ -23,12 +23,12 @@ import { DataColumn } from '../../data/data-column.model';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ColumnsSearchFilterPipe } from './columns-search-filter.pipe';
 import { MatListOption, MatSelectionList, MatSelectionListChange } from '@angular/material/list';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-datatable-column-selector',
@@ -36,7 +36,7 @@ import { MatListOption, MatSelectionList, MatSelectionListChange } from '@angula
         CommonModule,
         TranslatePipe,
         MatButtonModule,
-        MatIconModule,
+        IconModule,
         MatDividerModule,
         ReactiveFormsModule,
         MatCheckboxModule,

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -163,7 +163,7 @@
                         #mainMenuTrigger="matMenuTrigger"
                         (click)="onMainMenuOpen()"
                         [matMenuTriggerFor]="mainMenu">
-                        <mat-icon>view_week_outline</mat-icon>
+                        <mat-icon adf-icon="view_week_outline" />
                     </button>
                     <mat-menu #mainMenu (closed)="onMainMenuClosed()">
                         <div #mainMenuTemplate role="presentation" (keydown.tab)="$event.stopPropagation()">
@@ -213,7 +213,7 @@
                         class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
                     <button mat-icon-button
                             [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
-                        <mat-icon>drag_indicator</mat-icon>
+                        <mat-icon adf-icon="drag_indicator" />
                     </button>
                 </div>
 
@@ -224,14 +224,14 @@
                             [title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
                             [attr.id]="'action_menu_left_' + idx"
                             [attr.data-automation-id]="'action_menu_' + idx">
-                        <mat-icon>more_vert</mat-icon>
+                        <mat-icon adf-icon="more_vert" />
                     </button>
                     <mat-menu #menu="matMenu">
                         <button mat-menu-item *ngFor="let action of getRowActions(row)"
                                 [attr.data-automation-id]="action.title"
                                 [disabled]="action.disabled"
                                 (click)="onExecuteRowAction(row, action)">
-                            <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
+                            <mat-icon *ngIf="action.icon" [adf-icon]="action.icon" />
                             <span>{{ action.title | translate }}</span>
                         </button>
                     </mat-menu>
@@ -282,9 +282,9 @@
                                 <mat-icon
                                     [attr.aria-label]="col.srTitle? (col.srTitle | translate) : null"
                                     [attr.aria-hidden]="!asIconValue(row, col)"
-                                    *ngIf="isIconValue(row, col); else no_iconvalue">
+                                    *ngIf="isIconValue(row, col); else no_iconvalue"
-                                    {{ asIconValue(row, col) }}
+                                    [adf-icon]="asIconValue(row, col)"
-                                </mat-icon>
+                                />
                                 <ng-template #no_iconvalue>
                                     <mat-icon class="adf-datatable-selected"
                                                 *ngIf="row.isSelected && !multiselect; else no_selected_row" svgIcon="selected" />
@@ -427,7 +427,7 @@
                                 [attr.id]="'action_menu_right_' + idx"
                                 [attr.data-automation-id]="'action_menu_' + idx"
                                 (keydown.enter)="actionsMenuTrigger.openMenu()">
-                            <mat-icon>more_vert</mat-icon>
+                            <mat-icon adf-icon="more_vert" />
                         </button>
                         <mat-menu #menu="matMenu">
                             <button mat-menu-item *ngFor="let action of getRowActions(row)"
@@ -435,7 +435,7 @@
                                     [attr.aria-label]="action.title | translate"
                                     [disabled]="action.disabled"
                                     (click)="onExecuteRowAction(row, action)">
-                                <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
+                                <mat-icon *ngIf="action.icon" [adf-icon]="action.icon" />
                                 <span>{{ action.title | translate }}</span>
                             </button>
                         </mat-menu>

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -60,7 +60,7 @@ import { DataCellEvent } from '../data-cell.event';
 import { DataRowActionEvent } from '../data-row-action.event';
 import { buffer, debounceTime, filter, map, share } from 'rxjs/operators';
 import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ResizeEvent } from '../../directives/resizable/types';
 import { CommonModule } from '@angular/common';
@@ -83,6 +83,7 @@ import { JsonCellComponent } from '../json-cell/json-cell.component';
 import { AmountCellComponent } from '../amount-cell/amount-cell.component';
 import { NumberCellComponent } from '../number-cell/number-cell.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../../icon/icon.module';
 
 // eslint-disable-next-line no-shadow
 export enum ShowHeaderMode {
@@ -107,7 +108,7 @@ export enum ShowHeaderMode {
         ResizeHandleDirective,
         MatButtonModule,
         MatMenuModule,
-        MatIconModule,
+        IconModule,
         UploadDirective,
         ContextMenuDirective,
         FileTypePipe,

lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.ts

@@ -16,17 +16,17 @@
  */
 
 import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
-    imports: [MatIconModule],
+    imports: [IconModule],
     selector: 'adf-icon-cell',
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         @if (icon()) {
-            <mat-icon [title]="title()" aria-hidden="true">{{ icon() }}</mat-icon>
+            <mat-icon [title]="title()" aria-hidden="true" [adf-icon]="icon()" />
         }
     `,
     encapsulation: ViewEncapsulation.None,

lib/core/src/lib/dialogs/dialog/dialog.component.html

@@ -13,9 +13,8 @@
                 *ngIf="data.headerIcon"
                 color="primary"
                 class="adf-dialog-header-icon"
-            >
+                [adf-icon]="data.headerIcon"
-                {{ data.headerIcon }}
+            />
-            </mat-icon>
             <h2 class="adf-dialog-title">{{ data.title | translate }}</h2>
         </div>
         <button
@@ -25,7 +24,7 @@
             title="{{'CLOSE' | translate }}"
             data-automation-id="adf-dialog-close-button"
         >
-            <mat-icon>close</mat-icon>
+            <mat-icon adf-icon="close" />
         </button>
     </div>
 

lib/core/src/lib/dialogs/dialog/dialog.component.ts

@@ -22,9 +22,9 @@ import { BehaviorSubject } from 'rxjs';
 import { DialogSize, DialogSizes } from './dialog.model';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../icon/icon.module';
 
 export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component data');
 
@@ -32,7 +32,7 @@ export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component d
     selector: 'adf-dialog',
     templateUrl: './dialog.component.html',
     styleUrls: ['./dialog.component.scss'],
-    imports: [CommonModule, TranslatePipe, MatIconModule, MatDialogModule, MatButtonModule],
+    imports: [CommonModule, TranslatePipe, IconModule, MatDialogModule, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class DialogComponent {

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html

@@ -6,7 +6,7 @@
         mat-icon-button
         [title]="'CLOSE' | translate"
         [mat-dialog-close]="false">
-        <mat-icon>close</mat-icon>
+        <mat-icon adf-icon="close" />
     </button>
 </h1>
 <mat-dialog-content class="adf-unsaved-changes-dialog-content">

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts

@@ -22,10 +22,10 @@ import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
 import { UserPreferencesService } from '../../common';
 import { AppConfigValues } from '../../app-config';
+import { IconModule } from '../../icon/icon.module';
 
 /**
  * Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding.
@@ -41,12 +41,15 @@ import { AppConfigValues } from '../../app-config';
     templateUrl: './unsaved-changes-dialog.component.html',
     styleUrls: ['./unsaved-changes-dialog.component.scss'],
     host: { class: 'adf-unsaved-changes-dialog' },
-    imports: [MatDialogModule, TranslatePipe, MatButtonModule, MatIconModule, CommonModule, MatCheckboxModule, ReactiveFormsModule]
+    imports: [MatDialogModule, TranslatePipe, MatButtonModule, IconModule, CommonModule, MatCheckboxModule, ReactiveFormsModule]
 })
 export class UnsavedChangesDialogComponent implements OnInit {
     dialogData: UnsavedChangesDialogData;
 
-    constructor(@Inject(MAT_DIALOG_DATA) public data: UnsavedChangesDialogData, private userPreferencesService: UserPreferencesService) {}
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: UnsavedChangesDialogData,
+        private userPreferencesService: UserPreferencesService
+    ) {}
 
     ngOnInit() {
         this.dialogData = {

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.html

@@ -18,13 +18,14 @@
             [attr.aria-label]="chip.name"
             (removed)="removedChip.emit(chip.id)">
             <span id="adf-dynamic-chip-list-chip-name-{{ idx }}">{{ chip.name }}</span>
-            <mat-icon *ngIf="showDelete"
+            <mat-icon 
-                      id="adf-dynamic-chip-list-delete-{{ chip.name }}"
+                *ngIf="showDelete"
-                      class="adf-dynamic-chip-list-delete-icon"
+                id="adf-dynamic-chip-list-delete-{{ chip.name }}"
-                      [disabled]="disableDelete"
+                class="adf-dynamic-chip-list-delete-icon"
-                      matChipRemove>
+                [disabled]="disableDelete"
-                close
+                adf-icon="close"
-            </mat-icon>
+                matChipRemove
+            />
         </mat-chip>
     </mat-chip-set>
     <button

lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.ts

@@ -36,9 +36,9 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChip, MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { Chip } from './chip';
+import { IconModule } from '../icon/icon.module';
 
 /**
  * This component shows dynamic list of chips which render depending on free space.
@@ -47,7 +47,7 @@ import { Chip } from './chip';
     selector: 'adf-dynamic-chip-list',
     templateUrl: './dynamic-chip-list.component.html',
     styleUrls: ['./dynamic-chip-list.component.scss'],
-    imports: [MatChipsModule, TranslatePipe, NgForOf, MatIconModule, NgIf, MatButtonModule],
+    imports: [MatChipsModule, TranslatePipe, NgForOf, IconModule, NgIf, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class DynamicChipListComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {

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

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

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

@@ -19,7 +19,6 @@ import { NgClass, NgForOf, NgIf, NgStyle, NgTemplateOutlet } from '@angular/comm
 import { ChangeDetectorRef, Component, Inject, inject, Injector, Input, OnDestroy, OnInit, Optional, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TranslatePipe } from '@ngx-translate/core';
 import { FormRulesManager, formRulesManagerFactory } from '../models/form-rules.model';
@@ -33,6 +32,7 @@ import { DecimalRenderMiddlewareService } from './middlewares/decimal-middleware
 import { MatDialog } from '@angular/material/dialog';
 import { ConfirmDialogComponent } from '../../../lib/dialogs/confirm-dialog/confirm.dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { IconModule } from '../../icon/icon.module';
 
 @Component({
     selector: 'adf-form-renderer',
@@ -57,7 +57,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
         NgTemplateOutlet,
         TranslatePipe,
         MatButtonModule,
-        MatIconModule,
+        IconModule,
         NgStyle,
         FormFieldComponent,
         FormsModule,

lib/core/src/lib/form/components/widgets/error/error.component.html

@@ -1,10 +1,10 @@
 <div class="adf-error-container adf-error-widget-container">
     <div *ngIf="error?.isActive()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
-        <mat-icon class="adf-error-icon">error_outline</mat-icon>
+        <mat-icon class="adf-error-icon" adf-icon="error_outline" />
         <div class="adf-error-text">{{ error.message | translate:translateParameters }}</div>
     </div>
     <div *ngIf="required" [@transitionMessages]="subscriptAnimationState" class="adf-error">
-        <mat-icon class="adf-error-icon">error_outline</mat-icon>
+        <mat-icon class="adf-error-icon" adf-icon="error_outline" />
         <div class="adf-error-text">{{ required }}</div>
     </div>
 </div>

lib/core/src/lib/form/components/widgets/error/error.component.ts

@@ -20,11 +20,11 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { NgIf } from '@angular/common';
 import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { FormService } from '../../../services/form.service';
 import { ErrorMessageModel } from '../core';
 import { WidgetComponent } from '../widget.component';
+import { IconModule } from '../../../../icon/icon.module';
 
 @Component({
     selector: 'error-widget',
@@ -53,7 +53,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [NgIf, MatIconModule, TranslatePipe],
+    imports: [NgIf, IconModule, TranslatePipe],
     encapsulation: ViewEncapsulation.None
 })
 export class ErrorWidgetComponent extends WidgetComponent implements OnChanges {

lib/core/src/lib/form/components/widgets/header/header.widget.html

@@ -30,7 +30,7 @@
                     class="mdl-button--icon"
                     (click)="onExpanderClicked(element)"
                 >
-                    <mat-icon> {{ element?.isExpanded ? 'expand_more' : 'expand_less' }} </mat-icon>
+                    <mat-icon [adf-icon]="element?.isExpanded ? 'expand_more' : 'expand_less'" />
                 </button>
             }
         </ng-template>

lib/core/src/lib/form/components/widgets/header/header.widget.ts

@@ -18,17 +18,17 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { ContainerModel } from '../core/container.model';
 import { FieldStylePipe } from './../../../pipes/field-style.pipe';
-import { MatIconModule } from '@angular/material/icon';
 import { NgTemplateOutlet } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
+import { IconModule } from '../../../../icon/icon.module';
 
 @Component({
     selector: 'adf-header-widget',
     templateUrl: './header.widget.html',
     styleUrls: ['./header.widget.scss'],
     encapsulation: ViewEncapsulation.None,
-    imports: [FieldStylePipe, MatIconModule, MatButtonModule, TranslatePipe, NgTemplateOutlet]
+    imports: [FieldStylePipe, IconModule, MatButtonModule, TranslatePipe, NgTemplateOutlet]
 })
 export class HeaderWidgetComponent {
     @Input() element: ContainerModel;

lib/core/src/lib/form/components/widgets/repeat/repeat.widget.html

@@ -20,7 +20,7 @@
                 [disabled]="element.field.readOnly"
                 (click)="addRow()"
             >
-                <mat-icon>add</mat-icon> {{ 'FORM.FIELD.REPEATABLE_SECTION.ADD_ROW' | translate }}
+                <mat-icon adf-icon="add" /> {{ 'FORM.FIELD.REPEATABLE_SECTION.ADD_ROW' | translate }}
             </button>
         } @else {
             <span class="adf-container-widget-row-action adf-container-widget-row-limit">{{ 'FORM.FIELD.REPEATABLE_SECTION.ROW_LIMIT_REACHED' | translate: { limit: element.field.params.maxNumberOfRows } }}</span>

lib/core/src/lib/form/components/widgets/repeat/repeat.widget.ts

@@ -17,17 +17,17 @@
 
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { FieldStylePipe } from '../../../pipes/field-style.pipe';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ContainerModel } from '../core/container.model';
+import { IconModule } from '../../../../icon/icon.module';
 
 @Component({
     selector: 'adf-repeat-widget',
     templateUrl: './repeat.widget.html',
     styleUrls: ['./repeat.widget.scss'],
     encapsulation: ViewEncapsulation.None,
-    imports: [FieldStylePipe, MatIconModule, MatButtonModule, TranslatePipe]
+    imports: [FieldStylePipe, IconModule, MatButtonModule, TranslatePipe]
 })
 export class RepeatWidgetComponent {
     @Input() element: ContainerModel;

lib/core/src/lib/form/components/widgets/unknown/unknown.widget.ts

@@ -18,17 +18,17 @@
 /* eslint-disable @angular-eslint/component-selector */
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { FormService } from '../../../services/form.service';
 import { WidgetComponent } from '../widget.component';
+import { IconModule } from '../../../../icon/icon.module';
 
 @Component({
     selector: 'unknown-widget',
     template: `
         <mat-list class="adf-unknown-widget">
             <mat-list-item>
-                <mat-icon class="mat-24">error_outline</mat-icon>
+                <mat-icon class="mat-24" adf-icon="error_outline" />
                 <span class="adf-unknown-text">Unknown type: {{ field.type }}</span>
             </mat-list-item>
         </mat-list>
@@ -45,7 +45,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [MatListModule, MatIconModule],
+    imports: [MatListModule, IconModule],
     encapsulation: ViewEncapsulation.None
 })
 export class UnknownWidgetComponent extends WidgetComponent {

lib/core/src/lib/icon/icon.component.mock.ts

@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { IconModule } from './icon.module';
+
+@Component({
+    template: `<mat-icon [adf-icon]="name" />`,
+    standalone: true,
+    imports: [IconModule]
+})
+export class IconComponent {
+    name: string;
+}

lib/core/src/lib/icon/icon.directive.spec.ts

@@ -15,36 +15,25 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { IconDirective } from './icon.directive';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { IconType, MatIconHarness, MatIconTestingModule } from '@angular/material/icon/testing';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
-
+import { IconComponent } from './icon.component.mock';
-@Component({
-    template: `<mat-icon adf-icon [name]="name" />`,
-    standalone: true,
-    imports: [MatIconModule, IconDirective]
-})
-class TestComponent {
-    name: string;
-}
 
 describe('IconDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
+    let fixture: ComponentFixture<IconComponent>;
-    let component: TestComponent;
+    let component: IconComponent;
     let loader: HarnessLoader;
 
     describe('alias map NOT provided', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
-                imports: [TestComponent, MatIconTestingModule]
+                imports: [IconComponent, MatIconTestingModule]
             });
 
-            fixture = TestBed.createComponent(TestComponent);
+            fixture = TestBed.createComponent(IconComponent);
             component = fixture.componentInstance;
             loader = TestbedHarnessEnvironment.loader(fixture);
         });
@@ -62,7 +51,7 @@ describe('IconDirective', () => {
     describe('alias map provided', () => {
         beforeEach(() => {
             TestBed.configureTestingModule({
-                imports: [TestComponent, MatIconTestingModule],
+                imports: [IconComponent, MatIconTestingModule],
                 providers: [
                     {
                         provide: ICON_ALIAS_MAP_TOKEN,
@@ -73,7 +62,7 @@ describe('IconDirective', () => {
                 ]
             });
 
-            fixture = TestBed.createComponent(TestComponent);
+            fixture = TestBed.createComponent(IconComponent);
             component = fixture.componentInstance;
             loader = TestbedHarnessEnvironment.loader(fixture);
         });

lib/core/src/lib/icon/icon.directive.ts

@@ -16,18 +16,19 @@
  */
 
 import { Directive, ElementRef, inject, Input, OnChanges } from '@angular/core';
-import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
 import { MatIcon } from '@angular/material/icon';
+import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
 
 @Directive({
-    selector: 'mat-icon[adf-icon]'
+    selector: 'mat-icon[adf-icon]',
+    standalone: false
 })
 export class IconDirective implements OnChanges {
     private readonly matIcon = inject(MatIcon);
     private readonly elementRef: ElementRef<HTMLElement> = inject(ElementRef);
     private readonly aliasMap = inject(ICON_ALIAS_MAP_TOKEN, { optional: true });
 
-    @Input() name: string;
+    @Input('adf-icon') name: string;
 
     ngOnChanges() {
         const iconAlias = this.aliasMap?.[this.name];
@@ -40,7 +41,7 @@ export class IconDirective implements OnChanges {
     }
 
     private appendLigatureText() {
-        this.resetSvg();
+        this.resetSvgIcon();
 
         const element = this.elementRef.nativeElement;
         const textNode = this.findTextNode(element);
@@ -56,7 +57,7 @@ export class IconDirective implements OnChanges {
         return Array.from(element.childNodes).find((node: ChildNode) => node.nodeType === Node.TEXT_NODE);
     }
 
-    private resetSvg() {
+    private resetSvgIcon() {
         this.matIcon.svgIcon = null;
     }
 }

lib/core/src/lib/icon/icon.module.ts

@@ -0,0 +1,27 @@
+/*!
+ * @license
+ * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { IconDirective } from './icon.directive';
+
+@NgModule({
+    declarations: [IconDirective],
+    imports: [MatIconModule],
+    exports: [MatIconModule, IconDirective]
+})
+export class IconModule {}

lib/core/src/lib/icon/public-api.ts

@@ -16,6 +16,7 @@
  */
 
 export * from './icon.component';
-export * from './icon-alias-map.type';
 export * from './icon-alias-map.token';
+export * from './icon-alias-map.type';
 export * from './icon.directive';
+export * from './icon.module';

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">{{ contentBlock.icon }}</mat-icon>
+                    <mat-icon *ngIf="contentBlock.icon" [adf-icon]="contentBlock.icon" />
                     <span *ngIf="contentBlock.label">{{ contentBlock.label | translate }}</span>
                 </ng-template>
 

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

@@ -36,7 +36,7 @@ import {
     InfoDrawerTitleDirective
 } from './info-drawer-layout.component';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-info-drawer-tab',
@@ -63,7 +63,7 @@ export class InfoDrawerTabComponent {
         InfoDrawerLayoutComponent,
         TranslatePipe,
         MatTabsModule,
-        MatIconModule,
+        IconModule,
         InfoDrawerButtonsDirective,
         InfoDrawerTitleDirective,
         InfoDrawerContentDirective,

lib/core/src/lib/language-menu/language-picker.component.ts

@@ -21,14 +21,14 @@ import { CommonModule } from '@angular/common';
 import { MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import { TranslatePipe } from '@ngx-translate/core';
 import { LanguageMenuComponent } from './language-menu.component';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-picker-button',
-    imports: [CommonModule, MatMenuModule, TranslatePipe, LanguageMenuComponent, MatIconModule],
+    imports: [CommonModule, MatMenuModule, TranslatePipe, LanguageMenuComponent, IconModule],
     template: `
         <button mat-menu-item [matMenuTriggerFor]="langMenu">
-            <mat-icon>language</mat-icon>
+            <mat-icon adf-icon="language" />
             {{ 'ADF.LANGUAGE' | translate }}
         </button>
         <mat-menu #langMenu="matMenu">

lib/core/src/lib/layout/components/header/header.component.html

@@ -12,11 +12,7 @@
         (click)="toggleMenu()"
         [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
-        <mat-icon
+        <mat-icon class="adf-menu-icon-header" role="img" aria-hidden="true" [adf-icon]="toggleIcon" />
-            class="adf-menu-icon-header"
-            role="img"
-            aria-hidden="true">{{ toggleIcon }}
-        </mat-icon>
     </button>
 
     <a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
@@ -47,10 +43,6 @@
         (click)="toggleMenu()"
         [attr.aria-expanded]="expandedSidenav"
         [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
-        <mat-icon
+        <mat-icon class="adf-menu-icon-header" role="img" aria-hidden="true" [adf-icon]="toggleIcon" />
-            class="adf-menu-icon-header"
-            role="img"
-            aria-hidden="true">{{ toggleIcon }}
-        </mat-icon>
     </button>
 </mat-toolbar>

lib/core/src/lib/layout/components/header/header.component.ts

@@ -21,13 +21,13 @@ import { AppConfigService } from '../../../app-config/app-config.service';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
 import { TranslatePipe } from '@ngx-translate/core';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-layout-header',
-    imports: [CommonModule, MatToolbarModule, MatButtonModule, MatIconModule, RouterModule, TranslatePipe],
+    imports: [CommonModule, MatToolbarModule, MatButtonModule, IconModule, RouterModule, TranslatePipe],
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss'],
     encapsulation: ViewEncapsulation.None,

lib/core/src/lib/login/components/login/login.component.html

@@ -32,7 +32,7 @@
                                  id="login-error"
                                  data-automation-id="login-error"
                                  class="adf-error  adf-error-message">
-                                <mat-icon class="adf-error-icon">warning</mat-icon>
+                                <mat-icon class="adf-error-icon" adf-icon="warning" />
                                 <span class="adf-login-error-message">
                                     {{ errorMsg | translate }}
                                 </span>
@@ -91,9 +91,7 @@
                                             (click)="toggleShowPassword($event)"
                                             (keyup.enter)="toggleShowPassword($event)"
                                             [attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
-                                        <mat-icon class="adf-login-form-password-icon adf-login-password-icon">
+                                        <mat-icon class="adf-login-form-password-icon adf-login-password-icon" [adf-icon]="isPasswordShow ? 'visibility' : 'visibility_off'" />
-                                            {{ isPasswordShow ? 'visibility' : 'visibility_off' }}
-                                        </mat-icon>
                                     </button>
                                 </mat-form-field>
                                 <span class="adf-login-validation"
@@ -142,7 +140,7 @@
                                     <span class="adf-login-button-label">
                                         {{ 'LOGIN.BUTTON.WELCOME' | translate }}
                                     </span>
-                                    <mat-icon class="adf-welcome-icon">done</mat-icon>
+                                    <mat-icon class="adf-welcome-icon" adf-icon="done" />
                                 </div>
                             </button>
                             <div *ngIf="showRememberMe" class="adf-login__remember-me">

lib/core/src/lib/login/components/login/login.component.ts

@@ -22,7 +22,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -37,6 +36,7 @@ import { LoginErrorEvent } from '../../models/login-error.event';
 import { LoginSubmitEvent } from '../../models/login-submit.event';
 import { LoginSuccessEvent } from '../../models/login-success.event';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../../icon/icon.module';
 
 // eslint-disable-next-line no-shadow
 enum LoginSteps {
@@ -65,7 +65,7 @@ interface LoginFormValues {
         MatCardModule,
         ReactiveFormsModule,
         TranslatePipe,
-        MatIconModule,
+        IconModule,
         MatFormFieldModule,
         MatInputModule,
         MatButtonModule,

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -1,17 +1,14 @@
-<button mat-button
+<button 
-        [matMenuTriggerFor]="menu"
+    mat-button
-        aria-hidden="false"
+    [matMenuTriggerFor]="menu"
-        [attr.aria-label]="('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)"
+    aria-hidden="false"
-        title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
+    [attr.aria-label]="('NOTIFICATIONS.' + (notifications.length ? 'UNREAD_MESSAGES' : 'NO_MESSAGE') | translate) + ' ' + ('NOTIFICATIONS.OPEN_HISTORY' | translate)"
-        class="adf-notification-history-menu_button"
+    title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
-        id="adf-notification-history-open-button"
+    class="adf-notification-history-menu_button"
-        (menuOpened)="onMenuOpened()">
+    id="adf-notification-history-open-button"
-    <mat-icon matBadge="&#8288;"
+    (menuOpened)="onMenuOpened()"
-              [matBadgeHidden]="!notifications.length"
+>
-              class="adf-notification-history-menu_button-icon"
+    <mat-icon matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeColor="accent" matBadgeSize="small" adf-icon="notifications" />
-              matBadgeColor="accent"
-              matBadgeSize="small">notifications
-    </mat-icon>
 </button>
 
 <mat-menu #menu="matMenu"
@@ -29,7 +26,7 @@
                 (click)="markAsRead()"
                 #markAsReadButton
                 (keydown)="manageFocus($event)">
-            <mat-icon class="adf-notification-history-mark-as-read-icon">done_all</mat-icon>
+            <mat-icon class="adf-notification-history-mark-as-read-icon" adf-icon="done_all" />
         </button>
     </div>
 
@@ -46,9 +43,7 @@
                     <div *ngIf="notification.initiator; else no_avatar"
                          [outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"></div>
                     <ng-template #no_avatar>
-                        <mat-icon class="adf-notification-history-menu-initiator">
+                        <mat-icon class="adf-notification-history-menu-initiator" [adf-icon]="notification.icon" />
-                            {{ notification.icon }}
-                        </mat-icon>
                     </ng-template>
                     <div class="adf-notification-history-menu-item-content-message">
                         <p class="adf-notification-history-menu-text adf-notification-history-menu-message"

lib/core/src/lib/notifications/components/notification-history.component.ts

@@ -35,7 +35,6 @@ import { StorageService } from '../../common/services/storage.service';
 import { PaginationModel } from '../../models/pagination.model';
 import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatListModule } from '@angular/material/list';
 import { NgForOf, NgIf } from '@angular/common';
@@ -43,6 +42,7 @@ import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@angular/cdk/a11y';
+import { IconModule } from '../../icon/icon.module';
 
 @Component({
     selector: 'adf-notification-history',
@@ -52,7 +52,7 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
         MatButtonModule,
         MatMenuModule,
         TranslatePipe,
-        MatIconModule,
+        IconModule,
         MatBadgeModule,
         MatListModule,
         NgIf,

lib/core/src/lib/pagination/pagination.component.html

@@ -18,7 +18,7 @@
             mat-icon-button
             [attr.aria-label]="'CORE.PAGINATION.ARIA.ITEMS_PER_PAGE' | translate"
             [matMenuTriggerFor]="pageSizeMenu">
-            <mat-icon>arrow_drop_down</mat-icon>
+            <mat-icon adf-icon="arrow_drop_down" />
         </button>
 
         <mat-menu #pageSizeMenu="matMenu" class="adf-pagination__page-selector">
@@ -42,7 +42,7 @@
             [attr.aria-label]="'CORE.PAGINATION.ARIA.CURRENT_PAGE' | translate"
             [matMenuTriggerFor]="pagesMenu"
             *ngIf="lastPage > 1">
-            <mat-icon>arrow_drop_down</mat-icon>
+            <mat-icon adf-icon="arrow_drop_down" />
         </button>
 
         <div *ngIf="pagination.totalItems">
@@ -68,7 +68,7 @@
             [attr.aria-label]="'CORE.PAGINATION.ARIA.PREVIOUS_PAGE' | translate"
             [disabled]="isFirstPage"
             (click)="goPrevious()">
-            <mat-icon>keyboard_arrow_left</mat-icon>
+            <mat-icon adf-icon="keyboard_arrow_left" />
         </button>
 
         <button
@@ -77,7 +77,7 @@
             [attr.aria-label]="'CORE.PAGINATION.ARIA.NEXT_PAGE' | translate"
             [disabled]="isLastPage"
             (click)="goNext()">
-            <mat-icon>keyboard_arrow_right</mat-icon>
+            <mat-icon adf-icon="keyboard_arrow_right" />
         </button>
     </div>
 </ng-container>

lib/core/src/lib/pagination/pagination.component.ts

@@ -36,9 +36,9 @@ import { UserPreferencesService, UserPreferenceValues } from '../common/services
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../icon/icon.module';
 
 export type PaginationAction = 'NEXT_PAGE' | 'PREV_PAGE' | 'CHANGE_PAGE_SIZE' | 'CHANGE_PAGE_NUMBER';
 
@@ -57,7 +57,7 @@ export const DEFAULT_PAGINATION: PaginationModel = {
     styleUrls: ['./pagination.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, MatMenuModule]
+    imports: [CommonModule, TranslatePipe, MatButtonModule, IconModule, MatMenuModule]
 })
 export class PaginationComponent implements OnInit, PaginationComponentInterface {
     private _pagination: PaginationModel;

lib/core/src/lib/search-text/search-text-input.component.html

@@ -10,7 +10,7 @@
                 [title]="'CORE.SEARCH.BUTTON.TOOLTIP' | translate"
                 (click)="toggleSearchBar()"
                 (keyup.enter)="toggleSearchBar()">
-            <mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+            <mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate" adf-icon="search" />
         </button>
         <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
             <mat-label *ngIf='label'>{{label}}</mat-label>
@@ -37,7 +37,7 @@
                     [title]="'CORE.SEARCH.FILTER.BUTTONS.CLOSE' | translate"
                     (click)="resetSearch()"
                     (keyup.enter)="resetSearch()">
-                    <mat-icon>close</mat-icon>
+                    <mat-icon adf-icon="close" />
                 </button>
         </mat-form-field>
     </div>

lib/core/src/lib/search-text/search-text-input.component.ts

@@ -33,7 +33,6 @@ import {
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { TranslatePipe } from '@ngx-translate/core';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -43,6 +42,7 @@ import { searchAnimation } from './animations';
 import { SearchAnimationDirection, SearchAnimationState, SearchTextStateEnum } from './models/search-text-input.model';
 import { SearchTriggerDirective } from './search-trigger.directive';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-search-text-input',
@@ -50,7 +50,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
     styleUrls: ['./search-text-input.component.scss'],
     animations: [searchAnimation],
     encapsulation: ViewEncapsulation.None,
-    imports: [MatButtonModule, MatIconModule, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf, NgClass],
+    imports: [MatButtonModule, IconModule, TranslatePipe, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf, NgClass],
     host: {
         class: 'adf-search-text-input'
     }

lib/core/src/lib/snackbar-content/snackbar-content.component.html

@@ -1,6 +1,6 @@
 <p class="adf-snackbar-message-content" data-automation-id="adf-snackbar-message-content" aria-hidden="true">
     @if (data.decorativeIcon) {
-        <mat-icon data-automation-id="adf-snackbar-decorative-icon">{{ data.decorativeIcon }}</mat-icon>
+        <mat-icon data-automation-id="adf-snackbar-decorative-icon" [adf-icon]="data.decorativeIcon" />   
     }
     {{ data.message }}
 </p>
@@ -16,7 +16,7 @@
         @if (data.actionIcon) {
             <button mat-button (click)="onIconClicked()" class="adf-snackbar-message-content-action-icon"
                     [attr.aria-label]="data.actionIconAriaLabel | translate">
-                <mat-icon>{{ data.actionIcon }}</mat-icon>
+                <mat-icon [adf-icon]="data.actionIcon" />
             </button>
         }
     </div>

lib/core/src/lib/snackbar-content/snackbar-content.component.ts

@@ -18,13 +18,13 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
 import { SnackBarData } from './snack-bar-data';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-snackbar-content',
-    imports: [MatIconModule, TranslatePipe, MatButtonModule],
+    imports: [IconModule, TranslatePipe, MatButtonModule],
     templateUrl: './snackbar-content.component.html',
     styleUrls: ['./snackbar-content.component.scss'],
     host: {
@@ -32,7 +32,10 @@ import { MatButtonModule } from '@angular/material/button';
     }
 })
 export class SnackbarContentComponent {
-    constructor(public snackBarRef: MatSnackBarRef<SnackbarContentComponent>, @Inject(MAT_SNACK_BAR_DATA) public data: SnackBarData) {
+    constructor(
+        public snackBarRef: MatSnackBarRef<SnackbarContentComponent>,
+        @Inject(MAT_SNACK_BAR_DATA) public data: SnackBarData
+    ) {
         if (!data) {
             this.data = { message: '' };
         }

lib/core/src/lib/sorting-picker/sorting-picker.component.html

@@ -8,6 +8,6 @@
 </mat-form-field>
 
 <button *ngIf="selected" class="adf-sorting-picker-button" mat-icon-button (click)="toggleSortDirection()" aria-label="'CORE.SEARCH.TOGGLE_ASC_DESC_ORDER' | translate">
-    <mat-icon *ngIf="ascending">arrow_upward</mat-icon>
+    <mat-icon *ngIf="ascending" adf-icon="arrow_upward" />
-    <mat-icon *ngIf="!ascending">arrow_downward</mat-icon>
+    <mat-icon *ngIf="!ascending" adf-icon="arrow_downward" />
 </button>

lib/core/src/lib/sorting-picker/sorting-picker.component.ts

@@ -21,11 +21,11 @@ import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 @Component({
     selector: 'adf-sorting-picker',
-    imports: [CommonModule, TranslatePipe, MatFormFieldModule, MatSelectModule, MatButtonModule, MatIconModule],
+    imports: [CommonModule, TranslatePipe, MatFormFieldModule, MatSelectModule, MatButtonModule, IconModule],
     templateUrl: './sorting-picker.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-sorting-picker' }

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.html

@@ -19,7 +19,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_OUT' | translate }}"
                 mat-icon-button
                 (click)="zoomOut()">
-            <mat-icon>zoom_out</mat-icon>
+            <mat-icon adf-icon="zoom_out" />
         </button>
 
         <div class="adf-image-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
@@ -31,7 +31,7 @@
                 title="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
                 (click)="zoomIn()">
-            <mat-icon>zoom_in</mat-icon>
+            <mat-icon adf-icon="zoom_in" />
         </button>
 
         <button *ngIf="!readOnly && allowedEditActions.rotate" id="viewer-rotate-button"
@@ -39,14 +39,14 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
                 mat-icon-button
                 (click)="rotateImage()">
-            <mat-icon>rotate_left</mat-icon>
+            <mat-icon adf-icon="rotate_left" />
         </button>
         <button *ngIf="!readOnly && allowedEditActions.crop" id="viewer-crop-button"
                 title="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
                 mat-icon-button
                 (click)="cropImage()">
-            <mat-icon>crop</mat-icon>
+            <mat-icon adf-icon="crop" />
         </button>
 
         <button id="viewer-reset-button"
@@ -54,7 +54,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.RESET' | translate }}"
                 mat-icon-button
                 (click)="reset()">
-            <mat-icon>zoom_out_map</mat-icon>
+            <mat-icon adf-icon="zoom_out_map" />
         </button>
 
     </adf-toolbar>
@@ -65,7 +65,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
                 mat-icon-button
                 (click)="reset()">
-            <mat-icon>close</mat-icon>
+            <mat-icon adf-icon="close" />
         </button>
 
         <button id="viewer-save-button"
@@ -73,7 +73,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.SAVE' | translate }}"
                 mat-icon-button
                 (click)="save()">
-            <mat-icon>check</mat-icon>
+            <mat-icon adf-icon="check" />
         </button>
 
     </adf-toolbar>

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts

@@ -31,19 +31,19 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
 import Cropper from 'cropperjs';
 import { AppConfigService } from '../../../app-config';
 import { UrlService } from '../../../common';
 import { ToolbarComponent } from '../../../toolbar';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-img-viewer',
     templateUrl: './img-viewer.component.html',
     styleUrls: ['./img-viewer.component.scss'],
     host: { class: 'adf-image-viewer' },
-    imports: [ToolbarComponent, TranslatePipe, MatIconModule, MatButtonModule, NgIf],
+    imports: [ToolbarComponent, TranslatePipe, IconModule, MatButtonModule, NgIf],
     encapsulation: ViewEncapsulation.None
 })
 export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {

lib/core/src/lib/viewer/components/pdf-viewer-password-dialog/pdf-viewer-password-dialog.html

@@ -1,5 +1,5 @@
 <div mat-dialog-title>
-    <mat-icon>lock</mat-icon>
+    <mat-icon adf-icon="lock" />
 </div>
 
 <mat-dialog-content>

lib/core/src/lib/viewer/components/pdf-viewer-password-dialog/pdf-viewer-password-dialog.ts

@@ -21,9 +21,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { ReactiveFormsModule, UntypedFormControl, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { TranslatePipe } from '@ngx-translate/core';
+import { IconModule } from '../../../icon/icon.module';
 
 declare const pdfjsLib: any;
 
@@ -31,13 +31,16 @@ declare const pdfjsLib: any;
     selector: 'adf-pdf-viewer-password-dialog',
     templateUrl: './pdf-viewer-password-dialog.html',
     styleUrls: ['./pdf-viewer-password-dialog.scss'],
-    imports: [MatDialogModule, MatIconModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, TranslatePipe, NgIf, MatButtonModule],
+    imports: [MatDialogModule, IconModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, TranslatePipe, NgIf, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class PdfPasswordDialogComponent implements OnInit {
     passwordFormControl: UntypedFormControl;
 
-    constructor(private dialogRef: MatDialogRef<PdfPasswordDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
+    constructor(
+        private dialogRef: MatDialogRef<PdfPasswordDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    ) {}
 
     ngOnInit() {
         this.passwordFormControl = new UntypedFormControl('', [Validators.required]);

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.html

@@ -8,7 +8,7 @@
                             (click)="toggleThumbnails()"
                             [attr.aria-label]="'ADF_VIEWER.ARIA.THUMBNAILS_PANLEL_CLOSE' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}">
-                        <mat-icon>close</mat-icon>
+                        <mat-icon adf-icon="close" />
                     </button>
                 </div>
 
@@ -52,7 +52,7 @@
                     data-automation-id="adf-thumbnails-button"
                     [disabled]="isPanelDisabled"
                     (click)="toggleThumbnails()">
-                <mat-icon>dashboard</mat-icon>
+                <mat-icon adf-icon="dashboard" />
             </button>
             <adf-toolbar-divider />
         </ng-container>
@@ -62,7 +62,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.PREVIOUS_PAGE' | translate }}"
                 mat-icon-button
                 (click)="previousPage()">
-            <mat-icon>keyboard_arrow_up</mat-icon>
+            <mat-icon adf-icon="keyboard_arrow_up" />
         </button>
 
         <button id="viewer-next-page-button"
@@ -70,7 +70,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.NEXT_PAGE' | translate }}"
                 mat-icon-button
                 (click)="nextPage()">
-            <mat-icon>keyboard_arrow_down</mat-icon>
+            <mat-icon adf-icon="keyboard_arrow_down" />
         </button>
 
         <div class="adf-pdf-viewer__toolbar-page-selector">
@@ -95,7 +95,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_IN' | translate }}"
                 mat-icon-button
                 (click)="zoomIn()">
-            <mat-icon>zoom_in</mat-icon>
+            <mat-icon adf-icon="zoom_in" />
         </button>
 
         <button id="viewer-zoom-out-button"
@@ -103,7 +103,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ZOOM_OUT' | translate }}"
                 mat-icon-button
                 (click)="zoomOut()">
-            <mat-icon>zoom_out</mat-icon>
+            <mat-icon adf-icon="zoom_out" />
         </button>
 
         <button id="viewer-scale-page-button"
@@ -112,7 +112,7 @@
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.FIT_PAGE' | translate }}"
                 mat-icon-button
                 (click)="pageFit()">
-            <mat-icon>zoom_out_map</mat-icon>
+            <mat-icon adf-icon="zoom_out_map" />
         </button>
 
     </adf-toolbar>

lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.ts

@@ -36,7 +36,6 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TranslatePipe } from '@ngx-translate/core';
 import { from, Subject, switchMap } from 'rxjs';
@@ -49,6 +48,7 @@ import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumb
 import * as pdfjsLib from 'pdfjs-dist/build/pdf.min.mjs';
 import { EventBus, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
 import { OnProgressParameters, PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
+import { IconModule } from '../../../icon/icon.module';
 
 export type PdfScaleMode = 'init' | 'page-actual' | 'page-width' | 'page-height' | 'page-fit' | 'auto';
 
@@ -63,7 +63,7 @@ export const PDFJS_VIEWER_MODULE = new InjectionToken('PDFJS_VIEWER_MODULE', { f
     host: { class: 'adf-pdf-viewer' },
     imports: [
         MatButtonModule,
-        MatIconModule,
+        IconModule,
         TranslatePipe,
         PdfThumbListComponent,
         NgIf,

lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.html

@@ -1,6 +1,6 @@
 <div class="adf-viewer__unknown-format-view">
     <div>
-        <mat-icon class="icon">error</mat-icon>
+        <mat-icon class="icon" adf-icon="error" />
         <div class="adf-viewer__unknown-label">{{ customError || 'ADF_VIEWER.UNKNOWN_FORMAT' | translate }}</div>
     </div>
 </div>

lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.ts

@@ -16,14 +16,14 @@
  */
 
 import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslatePipe } from '@ngx-translate/core';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-viewer-unknown-format',
     templateUrl: './unknown-format.component.html',
     styleUrls: ['./unknown-format.component.scss'],
-    imports: [MatIconModule, TranslatePipe],
+    imports: [IconModule, TranslatePipe],
     encapsulation: ViewEncapsulation.None
 })
 export class UnknownFormatComponent {

lib/core/src/lib/viewer/components/viewer.component.html

@@ -18,7 +18,7 @@
                                 data-automation-id="adf-toolbar-left-sidebar"
                                 [color]="showLeftSidebar ? 'accent' : null"
                                 (click)="toggleLeftSidebar()">
-                            <mat-icon>info_outline</mat-icon>
+                            <mat-icon adf-icon="info_outline" />
                         </button>
                     </ng-container>
 
@@ -29,7 +29,7 @@
                             mat-icon-button
                             title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
                             (click)="onClose()">
-                        <mat-icon>close</mat-icon>
+                        <mat-icon adf-icon="close" />
                     </button>
                 </adf-toolbar-title>
 
@@ -40,7 +40,7 @@
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
                             (click)="onNavigateBeforeClick($event)">
-                        <mat-icon>navigate_before</mat-icon>
+                        <mat-icon adf-icon="navigate_before" />
                     </button>
                     <img class="adf-viewer__mimeicon"
                          [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
@@ -66,7 +66,7 @@
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
                             (click)="onNavigateNextClick($event)">
-                        <mat-icon>navigate_next</mat-icon>
+                        <mat-icon adf-icon="navigate_next" />
                     </button>
                 </div>
 
@@ -79,7 +79,7 @@
                             [matMenuTriggerFor]="mnuOpenWith"
                             data-automation-id="adf-toolbar-open-with">
                         <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
-                        <mat-icon>arrow_drop_down</mat-icon>
+                        <mat-icon adf-icon="arrow_drop_down" />
                     </button>
                     <mat-menu #mnuOpenWith="matMenu"
                               [overlapTrigger]="false">
@@ -100,7 +100,7 @@
                         title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
                         data-automation-id="adf-toolbar-fullscreen"
                         (click)="enterFullScreen()">
-                    <mat-icon>fullscreen</mat-icon>
+                    <mat-icon adf-icon="fullscreen" />
                 </button>
 
                 <ng-container *ngIf="allowRightSidebar && !hideInfoButton">
@@ -113,7 +113,7 @@
                             data-automation-id="adf-toolbar-sidebar"
                             [color]="showRightSidebar ? 'accent' : null"
                             (click)="toggleRightSidebar()">
-                        <mat-icon>info_outline</mat-icon>
+                        <mat-icon adf-icon="info_outline" />
                     </button>
 
                 </ng-container>
@@ -125,7 +125,7 @@
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
                             data-automation-id="adf-toolbar-more-actions">
-                        <mat-icon>more_vert</mat-icon>
+                        <mat-icon adf-icon="more_vert" />
                     </button>
                     <mat-menu #mnuMoreActions="matMenu"
                               [overlapTrigger]="false">
@@ -143,7 +143,7 @@
                             mat-icon-button
                             title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
                             (click)="onClose()">
-                        <mat-icon>close</mat-icon>
+                        <mat-icon adf-icon="close" />
                     </button>
                 </ng-container>
 

lib/core/src/lib/viewer/components/viewer.component.ts

@@ -37,7 +37,6 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { TranslatePipe } from '@ngx-translate/core';
 import { fromEvent } from 'rxjs';
@@ -58,6 +57,7 @@ import { ViewerToolbarCustomActionsComponent } from './viewer-toolbar-custom-act
 import { IconComponent } from '../../icon';
 import { ThumbnailService } from '../../common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IconModule } from '../../icon/icon.module';
 
 const DEFAULT_NON_PREVIEW_CONFIG = {
     enableDownloadPrompt: false,
@@ -79,7 +79,7 @@ const DEFAULT_NON_PREVIEW_CONFIG = {
         ToolbarTitleComponent,
         MatButtonModule,
         TranslatePipe,
-        MatIconModule,
+        IconModule,
         MatMenuModule,
         ToolbarDividerComponent,
         ViewerRenderComponent,