feat: migrate cds-icon, cds/core styles and drop cds/core dependency

.storybook/helpers/files.data.ts

@@ -86,7 +86,7 @@ export function getFileTreeNodeMarkup(
   return files
     .map(file => {
       const data = args.hasIcon
-        ? `<cds-icon [attr.shape]="'${file.files ? 'folder' : 'file'}'"></cds-icon> ${file.name}`
+        ? `<cds-icon [shape]="'${file.files ? 'folder' : 'file'}'"></cds-icon> ${file.name}`
         : file.name;
 
       return `

.storybook/preview.js

@@ -5,9 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import '@cds/core/icon/register.js';
-
-import { loadCoreIconSet, loadEssentialIconSet } from '@cds/core/icon';
+import { loadCoreIconSet, loadEssentialIconSet } from '@clr/angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import { applicationConfig } from '@storybook/angular';
 import { provideAnimations } from '@angular/platform-browser/animations';

.storybook/stories/alert/app-level-alert.storybook.component.ts

@@ -7,7 +7,7 @@
 
 import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ClrAlertModule, ClrDropdownModule, ClrIconModule } from '@clr/angular';
+import { ClrAlertModule, ClrDropdownModule, ClrIcon } from '@clr/angular';
 import { createArray } from 'helpers/common';
 
 import { RenderComponentStorybook } from '../../helpers/render-component';
@@ -75,7 +75,7 @@ import { RenderComponentStorybook } from '../../helpers/render-component';
     </ng-template>
   `,
   standalone: true,
-  imports: [ClrAlertModule, ClrIconModule, NgFor, NgIf, NgTemplateOutlet, ClrDropdownModule],
+  imports: [ClrAlertModule, ClrIcon, NgFor, NgIf, NgTemplateOutlet, ClrDropdownModule],
 })
 export class AppLevelAlertStorybookComponent extends RenderComponentStorybook {
   // Story inputs matching the original story args

.storybook/stories/button/button-group.storybook.component.ts

@@ -7,14 +7,14 @@
 
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { ClrButtonGroupModule, ClrLoadingModule, commonStringsDefault } from '@clr/angular';
+import { ClrButtonGroupModule, ClrIcon, ClrLoadingModule, commonStringsDefault } from '@clr/angular';
 import { BUTTON_STYLES, BUTTON_TYPES, getButtonClass } from 'helpers/button-class.helper';
 import { createArray } from 'helpers/common';
 
 @Component({
   selector: 'storybook-button-group',
   standalone: true,
-  imports: [CommonModule, ClrButtonGroupModule, ClrLoadingModule],
+  imports: [CommonModule, ClrButtonGroupModule, ClrLoadingModule, ClrIcon],
   template: `
     <!-- Default Template -->
     <div

.storybook/stories/button/button.storybook.component.ts

@@ -7,7 +7,7 @@
 
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ClrIconModule, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState } from '@clr/angular';
+import { ClrIcon, ClrLoadingButtonModule, ClrLoadingModule, ClrLoadingState } from '@clr/angular';
 import { BUTTON_STYLES, BUTTON_TYPES, getButtonClass } from 'helpers/button-class.helper';
 import { createArray } from 'helpers/common';
 
@@ -16,13 +16,13 @@ import { RenderComponentStorybook } from '../../helpers/render-component';
 @Component({
   selector: 'storybook-button',
   standalone: true,
-  imports: [CommonModule, ClrIconModule, ClrLoadingButtonModule, ClrLoadingModule],
+  imports: [CommonModule, ClrIcon, ClrLoadingButtonModule, ClrLoadingModule],
   template: `
     <ng-container [ngSwitch]="templateMode">
       <!-- Default Button Template -->
       <ng-container *ngSwitchCase="'default'">
         <button class="btn" [ngClass]="getButtonClass({ buttonType, buttonStyle, btnSmallSize })" [disabled]="disabled">
-          <cds-icon *ngIf="iconShape" [attr.shape]="iconShape"></cds-icon>
+          <cds-icon *ngIf="iconShape" [shape]="iconShape"></cds-icon>
           {{ content }}
           <ng-container #renderContainer></ng-container>
         </button>
@@ -36,7 +36,7 @@ import { RenderComponentStorybook } from '../../helpers/render-component';
           [ngClass]="getButtonClass({ buttonType, buttonStyle, btnSmallSize })"
           [disabled]="disabled"
         >
-          <cds-icon *ngIf="iconShape" [attr.shape]="iconShape"></cds-icon>
+          <cds-icon *ngIf="iconShape" [shape]="iconShape"></cds-icon>
           {{ content }}
         </a>
       </ng-container>

.storybook/stories/forms/forms-input-states-styles.stories.ts

@@ -5,7 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrFormLayout, ClrFormsModule, ClrLayoutModule } from '@clr/angular';
+import { ClrFormLayout, ClrIcon } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 
 import { CommonModules } from '../../helpers/common';
@@ -14,7 +14,7 @@ export default {
   title: 'Forms/Input States (Styles only)',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrLayoutModule, ClrFormsModule],
+      imports: [...CommonModules, ClrIcon],
     }),
   ],
   argTypes: {

.storybook/stories/header/header-colors.stories.ts

@@ -5,7 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrHeader, ClrMainContainerModule, ClrNavigationModule } from '@clr/angular';
+import { ClrHeader, ClrIcon, ClrMainContainerModule, ClrNavigationModule } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 
 import { CommonModules } from '../../helpers/common';
@@ -25,7 +25,7 @@ export default {
   title: 'Header/Header Colors',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrMainContainerModule, ClrNavigationModule],
+      imports: [...CommonModules, ClrMainContainerModule, ClrNavigationModule, ClrIcon],
     }),
   ],
   component: ClrHeader,

.storybook/stories/header/header.storybook.component.ts

@@ -7,12 +7,12 @@
 
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { ClrIconModule, ClrMainContainerModule, ClrNavigationModule } from '@clr/angular';
+import { ClrIcon, ClrMainContainerModule, ClrNavigationModule } from '@clr/angular';
 
 @Component({
   selector: 'storybook-header',
   standalone: true,
-  imports: [CommonModule, ClrMainContainerModule, ClrNavigationModule, ClrIconModule],
+  imports: [CommonModule, ClrMainContainerModule, ClrNavigationModule, ClrIcon],
   template: `
     <clr-main-container>
       <clr-header [role]="role">

.storybook/stories/label/label.storybook.component.ts

@@ -7,7 +7,7 @@
 
 import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { ClrIconModule, ClrLabel } from '@clr/angular';
+import { ClrIcon, ClrLabel } from '@clr/angular';
 
 import { RenderComponentStorybook } from '../../helpers/render-component';
 
@@ -44,7 +44,7 @@ import { RenderComponentStorybook } from '../../helpers/render-component';
     }
   `,
   standalone: true,
-  imports: [ClrIconModule, ClrLabel, NgClass],
+  imports: [ClrIcon, ClrLabel, NgClass],
 })
 export class LabelStoryBookComponent extends RenderComponentStorybook {
   @Input() content = 'Hello World!';

.storybook/stories/layout/application-layout/application-layout.storybook.component.html

@@ -110,11 +110,11 @@
     <clr-vertical-nav *ngIf="level2Navigation" class="tree-nav" [clrVerticalNavCollapsible]="true">
       <clr-tree>
         <clr-tree-node *ngFor="let directory of rootDirectory" [(clrExpanded)]="directory.expanded">
-          <cds-icon [attr.shape]="directory.icon"></cds-icon>
+          <cds-icon [shape]="directory.icon"></cds-icon>
           {{ directory.name }}
           <clr-tree-node *ngFor="let file of directory.files">
             <button class="clr-treenode-link" [class.active]="file.active">
-              <cds-icon [attr.shape]="file.icon"></cds-icon>
+              <cds-icon [shape]="file.icon"></cds-icon>
               {{ file.name }}
             </button>
           </clr-tree-node>

.storybook/stories/layout/application-layout/application-layout.storybook.component.ts

@@ -9,6 +9,8 @@ import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import {
   ClarityIcons,
+  ClarityModule,
+  ClrIcon,
   loadChartIconSet,
   loadCommerceIconSet,
   loadCoreIconSet,
@@ -19,8 +21,7 @@ import {
   loadTechnologyIconSet,
   loadTextEditIconSet,
   loadTravelIconSet,
-} from '@cds/core/icon';
-import { ClarityModule, ClrIconModule } from '@clr/angular';
+} from '@clr/angular';
 import { elements } from 'helpers/elements.data';
 
 import { organization } from './organization';
@@ -31,7 +32,7 @@ import { VerticalNavIconService } from '../../../../projects/angular/src/layout/
   templateUrl: './application-layout.storybook.component.html',
   styleUrls: ['./application-layout.storybook.component.scss'],
   standalone: true,
-  imports: [CommonModule, ClarityModule, ClrIconModule],
+  imports: [CommonModule, ClarityModule, ClrIcon],
   providers: [VerticalNavIconService],
 })
 export class ApplicationLayoutStorybookComponent {

.storybook/stories/layout/gaps.stories.ts

@@ -68,7 +68,7 @@ import { CommonModules } from '../../helpers/common';
         align-items: center;
         background: var(--cds-global-color-cool-gray-700);
         color: var(--cds-global-color-gray-0);
-        font-size: var(--cds-global-typography-body-font-size);
+        font-size: var(--cds-alias-typography-body-font-size);
         min-width: 50px;
         min-height: 50px;
         margin-left: 1px;

.storybook/stories/layout/icon.stories.ts

@@ -6,7 +6,7 @@
  */
 
 import { Component } from '@angular/core';
-import { ClrIconModule } from '@clr/angular';
+import { ClrIcon } from '@clr/angular';
 import { moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { CommonModules } from '../../helpers/common';
@@ -79,7 +79,7 @@ import { CommonModules } from '../../helpers/common';
     `,
   ],
   standalone: true,
-  imports: [ClrIconModule],
+  imports: [ClrIcon],
 })
 export class IconSizeStorybookComponent {}
 

.storybook/stories/layout/margins.stories.ts

@@ -43,7 +43,7 @@ import { CommonModules } from '../../helpers/common';
         align-items: center;
         background: var(--cds-global-color-cool-gray-700);
         color: var(--cds-global-color-gray-0);
-        font-size: var(--cds-global-typography-body-font-size);
+        font-size: var(--cds-alias-typography-body-font-size);
         min-width: 50px;
         min-height: 50px;
       }

.storybook/stories/layout/paddings.stories.ts

@@ -43,7 +43,7 @@ import { CommonModules } from '../../helpers/common';
         align-items: center;
         background: var(--cds-global-color-cool-gray-700);
         color: var(--cds-global-color-gray-0);
-        font-size: var(--cds-global-typography-body-font-size);
+        font-size: var(--cds-alias-typography-body-font-size);
         min-width: 50px;
         min-height: 50px;
       }

.storybook/stories/tabs/tabs-actions.stories.ts

@@ -5,7 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrTabs, ClrTabsModule } from '@clr/angular';
+import { ClrIcon, ClrTabs, ClrTabsModule } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 
 import { TabsLayout } from '../../../projects/angular/src/layout/tabs/enums/tabs-layout.enum';
@@ -14,7 +14,7 @@ export default {
   title: 'Tabs/Tabs Actions',
   decorators: [
     moduleMetadata({
-      imports: [ClrTabsModule],
+      imports: [ClrTabsModule, ClrIcon],
     }),
   ],
   component: ClrTabs,

.storybook/stories/tree/tree-with-actionable-nodes.stories.ts

@@ -5,15 +5,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrTree, ClrTreeViewModule } from '@clr/angular';
+import { ClrIcon, ClrTree, ClrTreeViewModule } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 import { CommonModules } from 'helpers/common';
 
 export default {
   title: 'Tree/Tree with actionable nodes',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrTreeViewModule],
+      imports: [...CommonModules, ClrTreeViewModule, ClrIcon],
     }),
   ],
   component: ClrTree,

.storybook/stories/tree/tree-with-multi-line-nodes.stories.ts

@@ -5,15 +5,15 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrTree, ClrTreeViewModule } from '@clr/angular';
+import { ClrIcon, ClrTree, ClrTreeViewModule } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 import { CommonModules } from 'helpers/common';
 
 export default {
   title: 'Tree/Tree with multi-line nodes',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrTreeViewModule],
+      imports: [...CommonModules, ClrTreeViewModule, ClrIcon],
     }),
   ],
   component: ClrTree,

.storybook/stories/tree/tree.stories.ts

@@ -5,7 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { ClrTree, ClrTreeViewModule } from '@clr/angular';
+import { ClrIcon, ClrTree, ClrTreeViewModule } from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 
 import { CommonModules } from '../../helpers/common';
@@ -15,7 +15,7 @@ export default {
   title: 'Tree/Tree',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrTreeViewModule],
+      imports: [...CommonModules, ClrTreeViewModule, ClrIcon],
     }),
   ],
   component: ClrTree,

.storybook/stories/vertical-nav/vertical-nav-group.stories.ts

@@ -5,9 +5,17 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { bellIcon, calendarIcon, folderIcon, homeIcon, searchIcon, userIcon } from '@cds/core/icon';
-import { IconShapeTuple } from '@cds/core/icon/interfaces/icon.interfaces';
-import { ClrVerticalNavGroup, ClrVerticalNavModule } from '@clr/angular';
+import {
+  bellIcon,
+  calendarIcon,
+  ClrVerticalNavGroup,
+  ClrVerticalNavModule,
+  folderIcon,
+  homeIcon,
+  IconShapeTuple,
+  searchIcon,
+  userIcon,
+} from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 import { action } from 'storybook/actions';
 
@@ -72,7 +80,7 @@ const NavGroupTemplate: StoryFn = args => ({
                 href="javascript:void(0)"
                 (click)="activeIndex = index"
               >
-                <cds-icon *ngIf="includeIcons" [attr.shape]="navLink.iconShapeTuple[0]" clrVerticalNavIcon></cds-icon>
+                <cds-icon *ngIf="includeIcons" [shape]="navLink.iconShapeTuple[0]" clrVerticalNavIcon></cds-icon>
                 {{ navLink.text }}
               </a>
             </clr-vertical-nav-group-children>

.storybook/stories/vertical-nav/vertical-nav-header-and-divider.stories.ts

@@ -5,9 +5,17 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { bellIcon, calendarIcon, folderIcon, homeIcon, searchIcon, userIcon } from '@cds/core/icon';
-import { IconShapeTuple } from '@cds/core/icon/interfaces/icon.interfaces';
-import { ClrVerticalNav, ClrVerticalNavModule } from '@clr/angular';
+import {
+  bellIcon,
+  calendarIcon,
+  ClrVerticalNav,
+  ClrVerticalNavModule,
+  folderIcon,
+  homeIcon,
+  IconShapeTuple,
+  searchIcon,
+  userIcon,
+} from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 
 import { CommonModules } from '../../helpers/common';