AAE-41496 Deprecate icon component (#11550)

* AAE-41496 Deprecate icon component

* AAE-41496 Improve template

* AAE-41496 Fix tests

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.html

@@ -8,13 +8,19 @@
                     <span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
-                            <button *ngFor="let filterAction of processFilterActions"
-                                    mat-icon-button
-                                    [title]="filterAction.tooltip | translate"
-                                    [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
-                                    [disabled]="isDisabledAction(filterAction)"
-                                    (click)="executeFilterActions($event, filterAction)">
-                                <adf-icon [value]="filterAction.icon" />
+                            <button 
+                                *ngFor="let filterAction of processFilterActions"
+                                mat-icon-button
+                                [title]="filterAction.tooltip | translate"
+                                [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
+                                [disabled]="isDisabledAction(filterAction)"
+                                (click)="executeFilterActions($event, filterAction)"
+                            >
+                                @if (filterAction.icon.includes(':')) {
+                                    <mat-icon [svgIcon]="filterAction.icon" aria-hidden="true" />
+                                } @else {
+                                    <mat-icon [adf-icon]="filterAction.icon" aria-hidden="true" />
+                                }   
                             </button>
                         </ng-container>
                     </div>

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.ts

@@ -29,7 +29,7 @@ import {
     ProcessFilterProperties,
     ProcessSortFilterProperty
 } from '../../models/process-filter-cloud.model';
-import { DateFnsUtils, IconComponent, IconModule, TranslationService, UserPreferencesService } from '@alfresco/adf-core';
+import { DateFnsUtils, IconModule, TranslationService, UserPreferencesService } from '@alfresco/adf-core';
 import { ProcessFilterCloudService } from '../../services/process-filter-cloud.service';
 import { ProcessFilterDialogCloudComponent } from '../process-filter-dialog/process-filter-dialog-cloud.component';
 import { ProcessCloudService } from '../../../services/process-cloud.service';
@@ -80,7 +80,6 @@ interface ProcessFilterFormProps {
 @Component({
     selector: 'adf-cloud-edit-process-filter',
     imports: [
-        IconComponent,
         MatProgressSpinnerModule,
         TranslatePipe,
         MatButtonModule,

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html

@@ -10,10 +10,7 @@
     >
         <div class="adf-process-filters__entry">
             <div>
-                <adf-icon
-                    data-automation-id="adf-filter-icon"
-                    *ngIf="showIcons"
-                    [value]="filter.icon" />
+                <mat-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [adf-icon]="filter.icon" aria-hidden="true" />
                 <span
                     data-automation-id="adf-filter-label"
                     class="adf-filter-action-button__label">

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts

@@ -27,6 +27,9 @@ import { mockProcessFilters } from '../../mock/process-filters-cloud.mock';
 import { AppConfigService, AppConfigServiceMock } from '@alfresco/adf-core';
 import { ProcessListCloudService } from '../../../process-list/services/process-list-cloud.service';
 import { ApolloTestingModule } from 'apollo-angular/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatIconHarness } from '@angular/material/icon/testing';
 
 const ProcessFilterCloudServiceMock = {
     getProcessFilters: () => of(mockProcessFilters),
@@ -40,6 +43,7 @@ describe('ProcessFiltersCloudComponent', () => {
     let fixture: ComponentFixture<ProcessFiltersCloudComponent>;
     let getProcessFiltersSpy: jasmine.Spy;
     let getProcessNotificationSubscriptionSpy: jasmine.Spy;
+    let loader: HarnessLoader;
 
     const configureTestingModule = (searchApiMethod: 'GET' | 'POST') => {
         TestBed.configureTestingModule({
@@ -58,6 +62,7 @@ describe('ProcessFiltersCloudComponent', () => {
             ]
         });
         fixture = TestBed.createComponent(ProcessFiltersCloudComponent);
+        loader = TestbedHarnessEnvironment.loader(fixture);
         component = fixture.componentInstance;
         component.searchApiMethod = searchApiMethod;
 
@@ -88,11 +93,11 @@ describe('ProcessFiltersCloudComponent', () => {
             await fixture.whenStable();
 
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
-            expect(filters.length).toBe(3);
-            expect(filters[0].innerText).toContain('adjust');
-            expect(filters[1].innerText).toContain('inbox');
-            expect(filters[2].innerText).toContain('done');
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(3);
+            expect(await filterIcons[0].getName()).toContain('adjust');
+            expect(await filterIcons[1].getName()).toContain('inbox');
+            expect(await filterIcons[2].getName()).toContain('done');
         });
 
         it('should not attach icons for each filter if hasIcon is false', async () => {
@@ -103,8 +108,8 @@ describe('ProcessFiltersCloudComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-            expect(filters.length).toBe(0);
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(0);
         });
 
         it('should display the filters', async () => {
@@ -245,11 +250,11 @@ describe('ProcessFiltersCloudComponent', () => {
             await fixture.whenStable();
 
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
-            expect(filters.length).toBe(3);
-            expect(filters[0].innerText).toContain('adjust');
-            expect(filters[1].innerText).toContain('inbox');
-            expect(filters[2].innerText).toContain('done');
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(3);
+            expect(await filterIcons[0].getName()).toContain('adjust');
+            expect(await filterIcons[1].getName()).toContain('inbox');
+            expect(await filterIcons[2].getName()).toContain('done');
         });
 
         it('should not attach icons for each filter if hasIcon is false', async () => {
@@ -260,8 +265,8 @@ describe('ProcessFiltersCloudComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-            expect(filters.length).toBe(0);
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(0);
         });
 
         it('should display the filters', async () => {

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.ts

@@ -19,7 +19,7 @@ import { Component, DestroyRef, EventEmitter, inject, Input, OnChanges, OnInit,
 import { Observable } from 'rxjs';
 import { ProcessFilterCloudService } from '../../services/process-filter-cloud.service';
 import { ProcessFilterCloudModel } from '../../models/process-filter-cloud.model';
-import { AppConfigService, IconComponent, TranslationService } from '@alfresco/adf-core';
+import { AppConfigService, IconModule, TranslationService } from '@alfresco/adf-core';
 import { FilterParamsModel } from '../../../../task/task-filters/models/filter-cloud.model';
 import { debounceTime, tap } from 'rxjs/operators';
 import { ProcessListCloudService } from '../../../process-list/services/process-list-cloud.service';
@@ -32,7 +32,7 @@ import { MatListModule } from '@angular/material/list';
 
 @Component({
     selector: 'adf-cloud-process-filters',
-    imports: [TranslatePipe, IconComponent, NgIf, MatProgressSpinnerModule, NgForOf, MatListModule, AsyncPipe],
+    imports: [TranslatePipe, IconModule, NgIf, MatProgressSpinnerModule, NgForOf, MatListModule, AsyncPipe],
     templateUrl: './process-filters-cloud.component.html',
     styleUrls: ['./process-filters-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.html

@@ -8,13 +8,19 @@
                     <span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-task-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
-                            <button *ngFor="let filterAction of taskFilterActions"
-                                    mat-icon-button
-                                    [title]="filterAction.tooltip | translate"
-                                    [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
-                                    [disabled]="isDisabledAction(filterAction)"
-                                    (click)="executeFilterActions(filterAction)">
-                                <adf-icon [value]="filterAction.icon" />
+                            <button 
+                                *ngFor="let filterAction of taskFilterActions"
+                                mat-icon-button
+                                [title]="filterAction.tooltip | translate"
+                                [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
+                                [disabled]="isDisabledAction(filterAction)"
+                                (click)="executeFilterActions(filterAction)"
+                            >
+                                @if (filterAction.icon.includes(':')) {
+                                    <mat-icon [svgIcon]="filterAction.icon" aria-hidden="true" />
+                                } @else {
+                                    <mat-icon [adf-icon]="filterAction.icon" aria-hidden="true" />
+                                } 
                             </button>
                         </ng-container>
                     </div>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.ts

@@ -25,7 +25,7 @@ import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
-import { IconComponent, IconModule } from '@alfresco/adf-core';
+import { IconModule } from '@alfresco/adf-core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -44,7 +44,6 @@ import { TaskAssignmentFilterCloudComponent } from '../../task-assignment-filter
         TranslatePipe,
         MatExpansionModule,
         MatButtonModule,
-        IconComponent,
         MatProgressSpinnerModule,
         ReactiveFormsModule,
         MatFormFieldModule,

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.html

@@ -8,13 +8,19 @@
                     <span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-task-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
-                            <button *ngFor="let filterAction of taskFilterActions"
-                                    mat-icon-button
-                                    [title]="filterAction.tooltip | translate"
-                                    [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
-                                    [disabled]="isDisabledAction(filterAction)"
-                                    (click)="executeFilterActions(filterAction)">
-                                <adf-icon [value]="filterAction.icon" />
+                            <button 
+                                *ngFor="let filterAction of taskFilterActions"
+                                mat-icon-button
+                                [title]="filterAction.tooltip | translate"
+                                [attr.data-automation-id]="'adf-filter-action-' + filterAction.actionType"
+                                [disabled]="isDisabledAction(filterAction)"
+                                (click)="executeFilterActions(filterAction)"
+                            >
+                                @if (filterAction.icon.includes(':')) {
+                                    <mat-icon [svgIcon]="filterAction.icon" aria-hidden="true" />
+                                } @else {
+                                    <mat-icon [adf-icon]="filterAction.icon" aria-hidden="true" />
+                                }      
                             </button>
                         </ng-container>
                     </div>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.ts

@@ -28,7 +28,7 @@ import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
-import { IconComponent, IconModule } from '@alfresco/adf-core';
+import { IconModule } from '@alfresco/adf-core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -47,7 +47,6 @@ import { TaskAssignmentFilterCloudComponent } from '../../task-assignment-filter
         TranslatePipe,
         MatExpansionModule,
         MatButtonModule,
-        IconComponent,
         MatProgressSpinnerModule,
         MatFormFieldModule,
         ReactiveFormsModule,

lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters/service-task-filters-cloud.component.html

@@ -6,21 +6,21 @@
             [attr.aria-label]="filter.name | translate"
             [id]="filter.id"
             [attr.data-automation-id]="filter.key + '_filter'"
-            [class.adf-active]="currentFilter === filter">
+            [class.adf-active]="currentFilter === filter"
+        >
             <div class="adf-task-filters__entry">
                 <div class="adf-task-filters__entry-label">
-                    <adf-icon data-automation-id="adf-filter-icon"
-                        *ngIf="showIcons"
-                        [value]="filter.icon"
-                    />
+                    <mat-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [adf-icon]="filter.icon" aria-hidden="true" />
                     <span data-automation-id="adf-filter-label">
                         {{ filter.name | translate }}
                     </span>
                 </div>
-                <span *ngIf="counters[filter.key]"
+                <span 
+                    *ngIf="counters[filter.key]"
                     [attr.data-automation-id]="filter.key + '_filter-counter'"
                     class="adf-task-filters__entry-counter"
-                    [class.adf-active]="wasFilterUpdated(filter.key)">
+                    [class.adf-active]="wasFilterUpdated(filter.key)"
+                >
                     {{ counters[filter.key] }}
                 </span>
             </div>

lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters/service-task-filters-cloud.component.spec.ts

@@ -25,6 +25,9 @@ import { fakeGlobalServiceFilters } from '../../mock/task-filters-cloud.mock';
 import { ServiceTaskFilterCloudService } from '../../services/service-task-filter-cloud.service';
 import { ServiceTaskFiltersCloudComponent } from './service-task-filters-cloud.component';
 import { NoopAuthModule, NoopTranslateModule } from '@alfresco/adf-core';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatIconHarness } from '@angular/material/icon/testing';
 
 describe('ServiceTaskFiltersCloudComponent', () => {
     let serviceTaskFilterCloudService: ServiceTaskFilterCloudService;
@@ -32,6 +35,7 @@ describe('ServiceTaskFiltersCloudComponent', () => {
 
     let component: ServiceTaskFiltersCloudComponent;
     let fixture: ComponentFixture<ServiceTaskFiltersCloudComponent>;
+    let loader: HarnessLoader;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -39,6 +43,7 @@ describe('ServiceTaskFiltersCloudComponent', () => {
             providers: [{ provide: TASK_FILTERS_SERVICE_TOKEN, useClass: LocalPreferenceCloudService }]
         });
         fixture = TestBed.createComponent(ServiceTaskFiltersCloudComponent);
+        loader = TestbedHarnessEnvironment.loader(fixture);
         component = fixture.componentInstance;
 
         serviceTaskFilterCloudService = TestBed.inject(ServiceTaskFilterCloudService);
@@ -64,11 +69,11 @@ describe('ServiceTaskFiltersCloudComponent', () => {
 
         expect(component.filters.length).toBe(3);
 
-        const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
-        expect(filters.length).toBe(3);
-        expect(filters[0].innerText).toContain('adjust');
-        expect(filters[1].innerText).toContain('done');
-        expect(filters[2].innerText).toContain('inbox');
+        const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+        expect(filterIcons.length).toBe(3);
+        expect(await filterIcons[0].getName()).toContain('adjust');
+        expect(await filterIcons[1].getName()).toContain('done');
+        expect(await filterIcons[2].getName()).toContain('inbox');
     });
 
     it('should not attach icons for each filter if hasIcon is false', async () => {
@@ -79,8 +84,8 @@ describe('ServiceTaskFiltersCloudComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-        expect(filters.length).toBe(0);
+        const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+        expect(filterIcons.length).toBe(0);
     });
 
     it('should display the filters', async () => {

lib/process-services-cloud/src/lib/task/task-filters/components/service-task-filters/service-task-filters-cloud.component.ts

@@ -20,7 +20,7 @@ import { Observable } from 'rxjs';
 import { FilterParamsModel, ServiceTaskFilterCloudModel } from '../../models/filter-cloud.model';
 import { BaseTaskFiltersCloudComponent } from '../base-task-filters-cloud.component';
 import { ServiceTaskFilterCloudService } from '../../services/service-task-filter-cloud.service';
-import { IconComponent, TranslationService } from '@alfresco/adf-core';
+import { IconModule, TranslationService } from '@alfresco/adf-core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -29,7 +29,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @Component({
     selector: 'adf-cloud-service-task-filters',
-    imports: [CommonModule, TranslatePipe, MatListModule, IconComponent, MatProgressSpinnerModule],
+    imports: [CommonModule, TranslatePipe, MatListModule, IconModule, MatProgressSpinnerModule],
     templateUrl: './service-task-filters-cloud.component.html',
     styleUrls: ['./service-task-filters-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html

@@ -6,21 +6,21 @@
             [attr.aria-label]="filter.name | translate"
             [id]="filter.id"
             [attr.data-automation-id]="filter.key + '_filter'"
-            [class.adf-active]="currentFilter === filter">
+            [class.adf-active]="currentFilter === filter"
+        >
             <div class="adf-task-filters__entry">
                 <div class="adf-task-filters__entry-label">
-                    <adf-icon data-automation-id="adf-filter-icon"
-                        *ngIf="showIcons"
-                        [value]="filter.icon"
-                    />
+                    <mat-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [adf-icon]="filter.icon" aria-hidden="true" />
                     <span data-automation-id="adf-filter-label">
                         {{ filter.name | translate }}
                     </span>
                 </div>
-                <span *ngIf="counters[filter.key]"
+                <span 
+                    *ngIf="counters[filter.key]"
                     [attr.data-automation-id]="filter.key + '_filter-counter'"
                     class="adf-task-filters__entry-counter"
-                    [class.adf-active]="wasFilterUpdated(filter.key)">
+                    [class.adf-active]="wasFilterUpdated(filter.key)"
+                >
                     {{ counters[filter.key] }}
                 </span>
             </div>

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts

@@ -32,6 +32,7 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { TaskFilterCloudAdapter } from '../../../../models/filter-cloud-model';
 import { ApolloTestingModule } from 'apollo-angular/testing';
 import { TaskFilterCloudModel } from '../../models/filter-cloud.model';
+import { MatIconHarness } from '@angular/material/icon/testing';
 
 describe('TaskFiltersCloudComponent', () => {
     let loader: HarnessLoader;
@@ -89,11 +90,11 @@ describe('TaskFiltersCloudComponent', () => {
 
             expect(component.filters.length).toBe(3);
 
-            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
-            expect(filters.length).toBe(3);
-            expect(filters[0].innerText).toContain('adjust');
-            expect(filters[1].innerText).toContain('done');
-            expect(filters[2].innerText).toContain('inbox');
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(3);
+            expect(await filterIcons[0].getName()).toContain('adjust');
+            expect(await filterIcons[1].getName()).toContain('done');
+            expect(await filterIcons[2].getName()).toContain('inbox');
         });
 
         it('should not attach icons for each filter if hasIcon is false', async () => {
@@ -104,8 +105,8 @@ describe('TaskFiltersCloudComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-            expect(filters.length).toBe(0);
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(0);
         });
 
         it('should display the filters', async () => {
@@ -251,25 +252,24 @@ describe('TaskFiltersCloudComponent', () => {
             component.appName = 'my-app-1';
         });
 
-        it('should attach specific icon for each filter if hasIcon is true', () => {
+        it('should attach specific icon for each filter if hasIcon is true', async () => {
             fixture.detectChanges();
 
-            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
 
             expect(component.filters.length).toBe(3);
-            expect(filters.length).toBe(3);
-            expect(filters[0].innerText).toContain('adjust');
-            expect(filters[1].innerText).toContain('done');
-            expect(filters[2].innerText).toContain('inbox');
+            expect(filterIcons.length).toBe(3);
+            expect(await filterIcons[0].getName()).toContain('adjust');
+            expect(await filterIcons[1].getName()).toContain('done');
+            expect(await filterIcons[2].getName()).toContain('inbox');
         });
 
-        it('should not attach icons for each filter if showIcons is false', () => {
+        it('should not attach icons for each filter if showIcons is false', async () => {
             component.showIcons = false;
             fixture.detectChanges();
 
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-
-            expect(filters.length).toBe(0);
+            const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
+            expect(filterIcons.length).toBe(0);
         });
 
         it('should display the filters', () => {

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.ts

@@ -19,7 +19,7 @@ import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, Simp
 import { Observable } from 'rxjs';
 import { TaskFilterCloudService } from '../../services/task-filter-cloud.service';
 import { FilterParamsModel, TaskFilterCloudModel } from '../../models/filter-cloud.model';
-import { AppConfigService, IconComponent, TranslationService } from '@alfresco/adf-core';
+import { AppConfigService, IconModule, TranslationService } from '@alfresco/adf-core';
 import { debounceTime, tap } from 'rxjs/operators';
 import { BaseTaskFiltersCloudComponent } from '../base-task-filters-cloud.component';
 import { TaskDetailsCloudModel } from '../../../models/task-details-cloud.model';
@@ -34,7 +34,7 @@ import { MatListModule } from '@angular/material/list';
 
 @Component({
     selector: 'adf-cloud-task-filters',
-    imports: [CommonModule, MatProgressSpinnerModule, TranslatePipe, IconComponent, MatListModule],
+    imports: [CommonModule, MatProgressSpinnerModule, TranslatePipe, IconModule, MatListModule],
     templateUrl: './task-filters-cloud.component.html',
     styleUrls: ['./task-filters-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None