From 304216b36bc23ba4c6524b1590464259882e7922 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
Date: Wed, 14 Jan 2026 16:13:11 +0000
Subject: [PATCH] AAE-41330 Unify adf-icon use in adf-core (#11527)

* AAE-41330 Unify adf-icon use in adf-core

* AAE-41330 Fix icon names
---
 .../src/_stories/demo-breadcrumb.component.ts |  6 +--
 .../lib/components/flags/flags.component.html |  6 +--
 .../info-drawer.component.stories.ts          | 10 ++--
 .../language-menu.component.stories.ts        | 16 ++-----
 .../language-picker.component.stories.ts      |  6 +--
 .../sidebar-action-menu.component.spec.ts     | 12 ++---
 .../sidenav-layout.component.stories.ts       | 18 ++++----
 .../lib/login/components/login.component.html | 46 ++++++++++---------
 ...r-container-more-actions.component.mock.ts | 10 ++--
 ...ewer-container-open-with.component.mock.ts | 10 ++--
 ...ontainer-toolbar-actions.component.mock.ts |  6 +--
 11 files changed, 72 insertions(+), 74 deletions(-)

diff --git a/lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts b/lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts
index 5095d4cd77..7728b79e99 100644
--- a/lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts
+++ b/lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts
@@ -18,10 +18,10 @@
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
 import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
 import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
 import { NgIf } from '@angular/common';
+import { IconModule } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-demo-breadcrumb',
@@ -51,7 +51,7 @@ import { NgIf } from '@angular/common';
                 <div>
                     Current Page
                     <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
-                        <mat-icon>menu_open</mat-icon>
+                        <mat-icon adf-icon="menu_open" />
                     </button>
 
                     <mat-menu #menu="matMenu">
@@ -63,7 +63,7 @@ import { NgIf } from '@angular/common';
         </adf-breadcrumb>
     `,
     standalone: true,
-    imports: [MatButtonModule, MatMenuModule, MatIconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
+    imports: [MatButtonModule, MatMenuModule, IconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
 })
 export class DemoBreadcrumbComponent {
     compact = false;
diff --git a/lib/core/feature-flags/src/lib/components/flags/flags.component.html b/lib/core/feature-flags/src/lib/components/flags/flags.component.html
index 5d2b7948c8..3279ebe037 100644
--- a/lib/core/feature-flags/src/lib/components/flags/flags.component.html
+++ b/lib/core/feature-flags/src/lib/components/flags/flags.component.html
@@ -21,8 +21,8 @@
       </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)">
-          <mat-icon class="material-icons-outlined adf-custom-flag-icon" fontIcon="memory" />
-          <mat-icon class="material-icons-outlined adf-trash-icon" fontIcon="delete" />
+          <mat-icon class="material-icons-outlined adf-custom-flag-icon" adf-icon="memory" />
+          <mat-icon class="material-icons-outlined adf-trash-icon" adf-icon="delete" />
         </button>
       </td>
     </ng-container>
@@ -40,7 +40,7 @@
       <th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
         <div class="adf-input-field-buttons-container">
           <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
-            <mat-icon class="material-icons-outlined" fontIcon="add_circle" />
+            <mat-icon class="material-icons-outlined" adf-icon="add_circle" />
           </button>
           <button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">
             <mat-icon adf-icon="cancel" />
diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts b/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
index 891ac228f0..8e58170283 100644
--- a/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
+++ b/lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
@@ -20,7 +20,7 @@ import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.compo
 import { InfoDrawerButtonsDirective, InfoDrawerContentDirective, InfoDrawerTitleDirective } from './info-drawer-layout.component';
 import { mockTabText, mockCardText } from './mock/info-drawer.mock';
 import { provideStoryCore } from '../stories/core-story.providers';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 type InfoDrawerStoryArgs = InfoDrawerComponent & {
     showSecondTab?: boolean;
@@ -48,7 +48,7 @@ const meta: Meta<InfoDrawerStoryArgs> = {
                 InfoDrawerTitleDirective,
                 InfoDrawerButtonsDirective,
                 InfoDrawerContentDirective,
-                MatIconModule
+                IconModule
             ]
         }),
         applicationConfig({
@@ -240,7 +240,7 @@ export const TabLayoutWithTextLabels: Story = {
         props: args,
         template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
             <div info-drawer-buttons>
-                <mat-icon>clear</mat-icon>
+                <mat-icon adf-icon="clear" />
             </div>
 
             <adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
@@ -276,7 +276,7 @@ export const TabLayoutWithIconLabels: Story = {
         props: args,
         template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
             <div info-drawer-buttons>
-                <mat-icon>clear</mat-icon>
+                <mat-icon adf-icon="clear" />
             </div>
 
             <adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
@@ -314,7 +314,7 @@ export const SingleLayout: Story = {
             <div info-drawer-title>File info</div>
 
             <div info-drawer-buttons>
-                <mat-icon>clear</mat-icon>
+                <mat-icon adf-icon="clear" />
             </div>
 
             <div info-drawer-content>
diff --git a/lib/core/src/lib/language-menu/language-menu.component.stories.ts b/lib/core/src/lib/language-menu/language-menu.component.stories.ts
index 99ab4637e5..5e893b0b03 100644
--- a/lib/core/src/lib/language-menu/language-menu.component.stories.ts
+++ b/lib/core/src/lib/language-menu/language-menu.component.stories.ts
@@ -22,14 +22,14 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
 import { provideStoryCore } from '../stories/core-story.providers';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 const meta: Meta<LanguageMenuComponent> = {
     component: LanguageMenuComponent,
     title: 'Core/Language Menu/Language Menu',
     decorators: [
         moduleMetadata({
-            imports: [LanguageMenuComponent, MatMenuModule, MatButtonModule, MatIconModule],
+            imports: [LanguageMenuComponent, MatMenuModule, MatButtonModule, IconModule],
             providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
         }),
         applicationConfig({
@@ -66,9 +66,7 @@ export const AsMainMenu: Story = {
         componentWrapperDecorator(
             (story) => `
       <button mat-icon-button [matMenuTriggerFor]="langMenu">
-        <mat-icon>
-          language
-        </mat-icon>
+        <mat-icon adf-icon="language" />
       </button>
       <mat-menu #langMenu="matMenu">
         ${story}
@@ -86,15 +84,11 @@ export const AsNestedMenu: Story = {
         componentWrapperDecorator(
             (story) => `
       <button mat-icon-button [matMenuTriggerFor]="profileMenu">
-        <mat-icon>
-          more_vert
-        </mat-icon>
+        <mat-icon adf-icon="more_vert" />
       </button>
       <mat-menu #profileMenu="matMenu">
         <button mat-menu-item [matMenuTriggerFor]="langMenu">
-          <mat-icon>
-            language
-          </mat-icon>
+          <mat-icon adf-icon="language" />
           Language
         </button>
       </mat-menu>
diff --git a/lib/core/src/lib/language-menu/language-picker.component.stories.ts b/lib/core/src/lib/language-menu/language-picker.component.stories.ts
index 1ce62dad9b..4451049e19 100644
--- a/lib/core/src/lib/language-menu/language-picker.component.stories.ts
+++ b/lib/core/src/lib/language-menu/language-picker.component.stories.ts
@@ -22,14 +22,14 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
 import { provideStoryCore } from '../stories/core-story.providers';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
+import { IconModule } from '../icon/icon.module';
 
 const meta: Meta<LanguagePickerComponent> = {
     component: LanguagePickerComponent,
     title: 'Core/Language Menu/Language Picker',
     decorators: [
         moduleMetadata({
-            imports: [LanguagePickerComponent, MatMenuModule, MatButtonModule, MatIconModule],
+            imports: [LanguagePickerComponent, MatMenuModule, MatButtonModule, IconModule],
             providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
         }),
         applicationConfig({
@@ -65,7 +65,7 @@ export const AsNestedMenu: Story = {
         componentWrapperDecorator(
             (story) => `
       <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>more_vert</mat-icon>
+        <mat-icon adf-icon="more_vert" />
       </button>
       <mat-menu #menu="matMenu">
         ${story}
diff --git a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
index 5f582dbb27..1e7036e65d 100644
--- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
+++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
@@ -19,9 +19,9 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
 import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
+import { IconModule } from '../../../icon/icon.module';
 
 describe('SidebarActionMenuComponent', () => {
     let component: SidebarActionMenuComponent;
@@ -52,21 +52,21 @@ describe('SidebarActionMenuComponent', () => {
 });
 
 @Component({
-    imports: [CommonModule, SidebarActionMenuComponent, MatIconModule, MatMenuModule],
+    imports: [CommonModule, SidebarActionMenuComponent, IconModule, MatMenuModule],
     // eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
     template: `
         <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
-            <mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+            <mat-icon adf-sidebar-menu-title-icon adf-icon="arrow_drop_down" />
             <div adf-sidebar-menu-expand-icon>
-                <mat-icon>queue</mat-icon>
+                <mat-icon adf-icon="queue" />
             </div>
             <div adf-sidebar-menu-options>
                 <button mat-menu-item>
-                    <mat-icon>assignment</mat-icon>
+                    <mat-icon adf-icon="assignment" />
                     <span>Option1</span>
                 </button>
                 <button mat-menu-item>
-                    <mat-icon>assignment</mat-icon>
+                    <mat-icon adf-icon="assignment" />
                     <span>Option2</span>
                 </button>
             </div>
diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
index ce3aad480f..087df34e58 100644
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
@@ -18,8 +18,8 @@
 import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 import { SidenavLayoutComponent } from './sidenav-layout.component';
 import { MatListModule } from '@angular/material/list';
-import { MatIconModule } from '@angular/material/icon';
 import { provideStoryCore } from '../../../stories/core-story.providers';
+import { IconModule } from '../../../icon/icon.module';
 
 type SidenavLayoutStoryArgs = SidenavLayoutComponent & {
     title?: string;
@@ -32,7 +32,7 @@ const meta: Meta<SidenavLayoutStoryArgs> = {
     title: 'Core/Layout/Sidenav Layout',
     decorators: [
         moduleMetadata({
-            imports: [SidenavLayoutComponent, MatIconModule, MatListModule]
+            imports: [SidenavLayoutComponent, IconModule, MatListModule]
         }),
         applicationConfig({
             providers: [...provideStoryCore()]
@@ -165,37 +165,37 @@ export const SidenavLayout: Story = {
                 <ng-template>
                     <mat-nav-list class="app-sidenav-linklist">
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>home</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="home" />
                             <span matLine>Home</span>
                         </mat-list-item>
 
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>device_hub</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="device_hub" />
                             <span matLine>Content Processes</span>
                         </mat-list-item>
 
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>folder_open</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="folder_open" />
                             <span matLine>Files</span>
                         </mat-list-item>
 
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>rowing</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="rowing" />
                             <span matLine>Quick Search</span>
                         </mat-list-item>
 
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>cloud</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="cloud" />
                             <span matLine>Cloud</span>
                         </mat-list-item>
 
                         <mat-list-item class="app-sidenav-link">
-                            <mat-icon matListItemIcon>settings</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="settings" />
                             <span matLine>Settings</span>
                         </mat-list-item>
 
                         <mat-list-item adf-logout class="app-sidenav-link" data-automation-id="Logout">
-                            <mat-icon matListItemIcon>exit_to_app</mat-icon>
+                            <mat-icon matListItemIcon adf-icon="exit_to_app" />
                             <span matLine>Logout</span>
                         </mat-list-item>
                     </mat-nav-list>
diff --git a/lib/core/src/lib/login/components/login.component.html b/lib/core/src/lib/login/components/login.component.html
index 98c3475c2e..7531d39a7d 100644
--- a/lib/core/src/lib/login/components/login.component.html
+++ b/lib/core/src/lib/login/components/login.component.html
@@ -36,7 +36,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>
@@ -82,14 +82,16 @@
                                 <mat-form-field
                                     class="adf-full-width adf-login-form-field"
                                     floatPlaceholder="never"
-                                    color="primary">
+                                    color="primary"
+                                >
                                         <input
                                             matInput
                                             placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
                                             [type]="isPasswordShow ? 'text' : 'password'"
                                             formControlName="password"
                                             id="password"
-                                            data-automation-id="password">
+                                            data-automation-id="password"
+                                        />
                                         <button
                                             matSuffix
                                             mat-icon-button
@@ -97,10 +99,9 @@
                                             [attr.aria-label]="(isPasswordShow ? 'LOGIN.ARIA-LABEL.HIDE-PASSWORD' : 'LOGIN.ARIA-LABEL.SHOW-PASSWORD') | translate"
                                             (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">
-                                                    {{ isPasswordShow ? 'visibility' : 'visibility_off' }}
-                                                </mat-icon>
+                                            [attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'"
+                                        >
+                                            <mat-icon class="adf-login-form-password-icon adf-login-password-icon" [adf-icon]="isPasswordShow ? 'visibility' : 'visibility_off'" />
                                         </button>
                                 </mat-form-field>
                                 <span
@@ -138,23 +139,26 @@
                                     </span>
                                     <div
                                         *ngIf="actualLoginStep === LoginSteps.Checking"
-                                        class="adf-interactive-login-label">
-                                            <span class="adf-login-button-label">
-                                                {{ 'LOGIN.BUTTON.CHECKING' | translate}}
-                                            </span>
-                                            <div class="adf-login-spinner-container">
-                                                <mat-spinner
-                                                    id="checking-spinner"
-                                                    class="adf-login-checking-spinner"
-                                                    [strokeWidth]="4"
-                                                    [diameter]="25" />
-                                            </div>
+                                        class="adf-interactive-login-label"
+                                    >
+                                        <span class="adf-login-button-label">
+                                            {{ 'LOGIN.BUTTON.CHECKING' | translate}}
+                                        </span>
+                                        <div class="adf-login-spinner-container">
+                                            <mat-spinner
+                                                id="checking-spinner"
+                                                class="adf-login-checking-spinner"
+                                                [strokeWidth]="4"
+                                                [diameter]="25"
+                                            />
+                                        </div>
                                     </div>
                                     <div
                                         *ngIf="actualLoginStep === LoginSteps.Welcome"
-                                        class="adf-interactive-login-label">
-                                            <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
-                                            <mat-icon class="adf-welcome-icon">done</mat-icon>
+                                        class="adf-interactive-login-label"
+                                    >
+                                        <span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
+                                        <mat-icon class="adf-welcome-icon" adf-icon="done" />
                                     </div>
                             </button>
                             <div *ngIf="showRememberMe" class="adf-login__remember-me">
diff --git a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-more-actions.component.mock.ts b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-more-actions.component.mock.ts
index d484230180..a9d4301aef 100644
--- a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-more-actions.component.mock.ts
+++ b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-more-actions.component.mock.ts
@@ -16,27 +16,27 @@
  */
 
 import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { ViewerComponent } from '../viewer.component';
 import { ViewerMoreActionsComponent } from '../viewer-more-actions.component';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-viewer-container-more-actions',
-    imports: [ViewerComponent, MatIconModule, MatMenuModule, ViewerMoreActionsComponent],
+    imports: [ViewerComponent, IconModule, MatMenuModule, ViewerMoreActionsComponent],
     template: `
         <adf-viewer>
             <adf-viewer-more-actions>
                 <button mat-menu-item>
-                    <mat-icon>dialpad</mat-icon>
+                    <mat-icon adf-icon="dialpad" />
                     <span>Action One</span>
                 </button>
                 <button mat-menu-item [disabled]="true">
-                    <mat-icon>voicemail</mat-icon>
+                    <mat-icon adf-icon="voicemail" />
                     <span>Action Two</span>
                 </button>
                 <button mat-menu-item>
-                    <mat-icon>notifications_off</mat-icon>
+                    <mat-icon adf-icon="notifications_off" />
                     <span>Action Three</span>
                 </button>
             </adf-viewer-more-actions>
diff --git a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-open-with.component.mock.ts b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-open-with.component.mock.ts
index bbd4a5d51d..9cb1f63d2d 100644
--- a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-open-with.component.mock.ts
+++ b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-open-with.component.mock.ts
@@ -16,27 +16,27 @@
  */
 
 import { Component } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { ViewerComponent } from '../viewer.component';
 import { ViewerOpenWithComponent } from '../viewer-open-with.component';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-viewer-container-open-with',
-    imports: [ViewerComponent, MatIconModule, MatMenuModule, ViewerOpenWithComponent],
+    imports: [ViewerComponent, IconModule, MatMenuModule, ViewerOpenWithComponent],
     template: `
         <adf-viewer>
             <adf-viewer-open-with>
                 <button mat-menu-item>
-                    <mat-icon>dialpad</mat-icon>
+                    <mat-icon adf-icon="dialpad" />
                     <span>Option 1</span>
                 </button>
                 <button mat-menu-item [disabled]="true">
-                    <mat-icon>voicemail</mat-icon>
+                    <mat-icon adf-icon="voicemail" />
                     <span>Option 2</span>
                 </button>
                 <button mat-menu-item>
-                    <mat-icon>notifications_off</mat-icon>
+                    <mat-icon adf-icon="notifications_off" />
                     <span>Option 3</span>
                 </button>
             </adf-viewer-open-with>
diff --git a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-toolbar-actions.component.mock.ts b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-toolbar-actions.component.mock.ts
index f1a892dcec..7b086060be 100644
--- a/lib/core/src/lib/viewer/components/mock/adf-viewer-container-toolbar-actions.component.mock.ts
+++ b/lib/core/src/lib/viewer/components/mock/adf-viewer-container-toolbar-actions.component.mock.ts
@@ -17,18 +17,18 @@
 
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { ViewerComponent } from '../viewer.component';
 import { ViewerToolbarActionsComponent } from '../viewer-toolbar-actions.component';
+import { IconModule } from '../../../icon/icon.module';
 
 @Component({
     selector: 'adf-viewer-container-toolbar-actions',
-    imports: [ViewerComponent, MatIconModule, MatButtonModule, ViewerToolbarActionsComponent],
+    imports: [ViewerComponent, IconModule, MatButtonModule, ViewerToolbarActionsComponent],
     template: `
         <adf-viewer>
             <adf-viewer-toolbar-actions>
                 <button mat-icon-button id="custom-button">
-                    <mat-icon>alarm</mat-icon>
+                    <mat-icon adf-icon="alarm" />
                 </button>
             </adf-viewer-toolbar-actions>
         </adf-viewer>