AAE-41496 Deprecate icon component (#11550)

* AAE-41496 Deprecate icon component

* AAE-41496 Improve template

* AAE-41496 Fix tests

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

@@ -125,11 +125,13 @@
                     cdkDragHandle
                     [ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
                 >
-                    <adf-icon
+                    <mat-icon
                         *ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
-                        value="adf:drag_indicator"
+                        svgIcon="adf:drag_indicator"
                         class="adf-datatable-cell-header-drag-icon-visible"
-                        [attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-'+col.key" />
+                        [attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-'+col.key"
+                        aria-hidden="true"
+                    />
                 </span>
             </div>
             <div

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

@@ -68,7 +68,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { FileTypePipe, LocalizedDatePipe } from '../../../pipes';
 import { DropZoneDirective } from '../../directives/drop-zone.directive';
 import { ResizableDirective } from '../../directives/resizable/resizable.directive';
-import { IconComponent } from '../../../icon';
 import { ResizeHandleDirective } from '../../directives/resizable/resize-handle.directive';
 import { MatButtonModule } from '@angular/material/button';
 import { UploadDirective } from '../../../directives';
@@ -104,7 +103,6 @@ export enum ShowHeaderMode {
         DropZoneDirective,
         ResizableDirective,
         CdkDragHandle,
-        IconComponent,
         ResizeHandleDirective,
         MatButtonModule,
         MatMenuModule,

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

@@ -1,80 +0,0 @@
-/*!
- * @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 { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { IconComponent } from './icon.component';
-import { provideStoryCore } from '../stories/core-story.providers';
-
-const meta: Meta<IconComponent> = {
-    component: IconComponent,
-    title: 'Core/Icon/Icon',
-    decorators: [
-        moduleMetadata({
-            imports: [IconComponent]
-        }),
-        applicationConfig({
-            providers: [...provideStoryCore()]
-        })
-    ],
-    parameters: {
-        docs: {
-            description: {
-                component: `Provides a universal way of rendering registered and named icons.`
-            }
-        }
-    },
-    argTypes: {
-        color: {
-            control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
-            description: 'icon color',
-            defaultValue: undefined,
-            table: {
-                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'undefined' }
-            }
-        },
-        value: {
-            description: 'icon name',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'settings' }
-            }
-        }
-    }
-};
-
-export default meta;
-type Story = StoryObj<IconComponent>;
-
-export const DefaultIcon: Story = {
-    render: (args) => ({
-        props: args
-    }),
-    args: {
-        value: ''
-    }
-};
-
-export const CustomIcon: Story = {
-    render: (args) => ({
-        props: args
-    }),
-    args: {
-        value: 'cloud_download'
-    }
-};

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

@@ -22,6 +22,8 @@ import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
 
 export const DEFAULT_ICON_VALUE = 'settings';
 
+/** @deprecated Use material icon with aria-hidden="true" attribute instead. */
+
 @Component({
     selector: 'adf-icon',
     imports: [MatIconModule],

lib/core/src/lib/templates/empty-content/empty-content.component.html

@@ -1,5 +1,5 @@
 <div class="adf-empty-content" [title]="title | translate">
-    <adf-icon class="adf-empty-content__icon" [value]="icon" />
+    <mat-icon class="adf-empty-content__icon" [adf-icon]="icon" aria-hidden="true" />
     <div class="adf-empty-content__title">{{ title | translate }}</div>
     <div class="adf-empty-content__subtitle">{{ subtitle | translate }}</div>
     <ng-content />

lib/core/src/lib/templates/empty-content/empty-content.component.scss

@@ -11,6 +11,7 @@
         font-size: var(--theme-display-3-font-size);
         height: var(--theme-display-3-font-size);
         width: var(--theme-display-3-font-size);
+        opacity: 0.6;
     }
 
     &__title {
@@ -30,8 +31,4 @@
         white-space: normal;
         text-align: center;
     }
-
-    .adf-icon {
-        opacity: 0.6;
-    }
 }

lib/core/src/lib/templates/empty-content/empty-content.component.ts

@@ -17,11 +17,11 @@
 
 import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
-import { IconComponent } from '../../icon';
+import { IconModule } from '../../icon';
 
 @Component({
     selector: 'adf-empty-content',
-    imports: [TranslatePipe, IconComponent],
+    imports: [TranslatePipe, IconModule],
     templateUrl: './empty-content.component.html',
     styleUrls: ['./empty-content.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -55,7 +55,6 @@ import { ViewerSidebarComponent } from './viewer-sidebar.component';
 import { ViewerToolbarComponent } from './viewer-toolbar.component';
 import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component';
 import { ViewerToolbarCustomActionsComponent } from './viewer-toolbar-custom-actions.component';
-import { IconComponent } from '../../icon';
 import { ThumbnailService } from '../../common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IconModule } from '../../icon/icon.module';
@@ -88,8 +87,7 @@ const DEFAULT_NON_PREVIEW_CONFIG = {
         ViewerToolbarComponent,
         ViewerSidebarComponent,
         ViewerToolbarActionsComponent,
-        ViewerToolbarCustomActionsComponent,
-        IconComponent
+        ViewerToolbarCustomActionsComponent
     ],
     providers: [ViewUtilService]
 })