refactor(chat-messages): migrate to svg icons

projects/element-ng/chat-messages/si-ai-message.component.html

@@ -30,7 +30,7 @@
           [attr.aria-label]="secondaryActionsLabel() | translate"
           [attr.title]="secondaryActionsLabel() | translate"
         >
-          <si-icon icon="element-optionsVertical" />
+          <si-icon [icon]="icons.elementOptionsVertical" />
         </button>
 
         <ng-template #secondaryActionsMenu>

projects/element-ng/chat-messages/si-ai-message.component.ts

@@ -12,7 +12,8 @@ import {
   ElementRef,
   signal
 } from '@angular/core';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { elementOptionsVertical } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
@@ -56,6 +57,7 @@ import { SiChatMessageComponent } from './si-chat-message.component';
 })
 export class SiAiMessageComponent {
   protected readonly formattedContent = viewChild<ElementRef<HTMLDivElement>>('formattedContent');
+  protected readonly icons = addIcons({ elementOptionsVertical });
 
   /**
    * The AI-generated message content

projects/element-ng/chat-messages/si-attachment-list.component.html

@@ -48,7 +48,7 @@
           [attr.aria-label]="(removeLabel() | translate) + ' ' + attachment.name"
           (click)="remove.emit(attachment); $event.stopPropagation()"
         >
-          <si-icon class="icon" icon="element-delete" />
+          <si-icon class="icon" [icon]="icons.elementDelete" />
         </button>
       }
     </div>

projects/element-ng/chat-messages/si-attachment-list.component.ts

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 import { booleanAttribute, Component, inject, input, output, TemplateRef } from '@angular/core';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { elementDelete, elementDocument } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { SiModalService } from '@siemens/element-ng/modal';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
@@ -53,6 +54,7 @@ export interface Attachment {
 })
 export class SiAttachmentListComponent {
   protected modalService = inject(SiModalService);
+  protected readonly icons = addIcons({ elementDelete, elementDocument });
 
   /**
    * List of attachments to display
@@ -110,6 +112,6 @@ export class SiAttachmentListComponent {
 
   protected getFileIcon(name: string): string {
     // TODO: Accept map and default it in file upload directive.
-    return 'element-document';
+    return this.icons.elementDocument;
   }
 }

projects/element-ng/chat-messages/si-chat-input.component.html

@@ -55,7 +55,7 @@
           [disabled]="disabled()"
           (click)="fileInput.click()"
         >
-          <si-icon icon="element-attachment" />
+          <si-icon [icon]="icons.elementAttachment" />
         </button>
       }
 
@@ -81,7 +81,7 @@
               [attr.aria-label]="secondaryActionsLabel() | translate"
               [attr.title]="secondaryActionsLabel() | translate"
             >
-              <si-icon icon="element-optionsVertical" />
+              <si-icon [icon]="icons.elementOptionsVertical" />
             </button>
 
             <ng-template #secondaryActionsMenu>

projects/element-ng/chat-messages/si-chat-input.component.spec.ts

@@ -7,6 +7,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { FileUploadError, UploadFile } from '@siemens/element-ng/file-uploader';
 
+import { provideIconConfig } from '../icon';
 import { MessageAction } from './message-action.model';
 import {
   ChatInputAttachment,
@@ -20,7 +21,8 @@ describe('SiChatInputComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TestComponent]
+      imports: [TestComponent],
+      providers: [provideIconConfig({ disableSvgIcons: false })]
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestComponent);
@@ -369,8 +371,9 @@ describe('SiChatInputComponent', () => {
     fixture.componentRef.setInput('interruptible', true);
     fixture.detectChanges();
 
-    const icon = debugElement.query(By.css('button si-icon'));
-    expect(icon.componentInstance.icon()).toBe('element-stop-filled');
+    expect(
+      debugElement.query(By.css('button[aria-label="Interrupt"] [data-icon="elementStopFilled"]'))
+    ).toBeTruthy();
   });
 
   it('should use interrupt button label when interruptible is true', () => {
@@ -481,16 +484,18 @@ describe('SiChatInputComponent', () => {
     fixture.detectChanges();
 
     expect((component as any).showInterruptButton()).toBe(false);
-    expect((component as any).buttonIcon()).toBe('element-send-filled');
-    expect((component as any).buttonLabel()).toContain('Send');
+    const sendButton = debugElement.query(By.css('button[aria-label="Send"]'));
+    expect(sendButton).toBeTruthy();
+    expect(sendButton.query(By.css('[data-icon="elementSendFilled"]'))).toBeTruthy();
   });
 
   it('should use interrupt mode when interruptible is true', () => {
     fixture.componentRef.setInput('interruptible', true);
     fixture.detectChanges();
 
     expect((component as any).showInterruptButton()).toBe(true);
-    expect((component as any).buttonIcon()).toBe('element-stop-filled');
-    expect((component as any).buttonLabel()).toContain('Interrupt');
+    const interruptButton = debugElement.query(By.css('button[aria-label="Interrupt"]'));
+    expect(interruptButton).toBeTruthy();
+    expect(interruptButton.query(By.css('[data-icon="elementStopFilled"]'))).toBeTruthy();
   });
 });

projects/element-ng/chat-messages/si-chat-input.component.ts

@@ -15,12 +15,18 @@ import {
   viewChild
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import {
+  elementAttachment,
+  elementOptionsVertical,
+  elementSendFilled,
+  elementStopFilled
+} from '@siemens/element-icons';
 import {
   SiFileUploadDirective,
   UploadFile,
   FileUploadError
 } from '@siemens/element-ng/file-uploader';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, TranslatableString, t } from '@siemens/element-translate-ng/translate';
 
@@ -89,6 +95,12 @@ export class SiChatInputComponent implements AfterViewInit {
   private readonly textInput = viewChild<ElementRef<HTMLTextAreaElement>>('textInput');
   private readonly projectedContent = viewChild<ElementRef>('projected');
   private readonly fileUploadDirective = viewChild(SiFileUploadDirective);
+  protected readonly icons = addIcons({
+    elementAttachment,
+    elementOptionsVertical,
+    elementSendFilled,
+    elementStopFilled
+  });
 
   /**
    * Current input value
@@ -205,9 +217,9 @@ export class SiChatInputComponent implements AfterViewInit {
   /**
    * Send button icon
    *
-   * @defaultValue 'element-send-filled'
+   * @defaultValue this.icons.elementSendFilled
    */
-  readonly sendButtonIcon = input('element-send-filled');
+  readonly sendButtonIcon = input(this.icons.elementSendFilled);
 
   /**
    * Interrupt button label
@@ -298,7 +310,7 @@ export class SiChatInputComponent implements AfterViewInit {
     return !this.canSend();
   });
   protected readonly buttonIcon = computed(() =>
-    this.showInterruptButton() ? 'element-stop-filled' : this.sendButtonIcon()
+    this.showInterruptButton() ? this.icons.elementStopFilled : this.sendButtonIcon()
   );
   protected readonly buttonLabel = computed(() =>
     this.showInterruptButton() ? this.interruptButtonLabel() : this.sendButtonLabel()

projects/element-ng/chat-messages/si-user-message.component.html

@@ -33,7 +33,7 @@
           [attr.aria-label]="secondaryActionsLabel() | translate"
           [attr.title]="secondaryActionsLabel() | translate"
         >
-          <si-icon icon="element-optionsVertical" />
+          <si-icon [icon]="icons.elementOptionsVertical" />
         </button>
 
         <ng-template #secondaryActionsMenu>

projects/element-ng/chat-messages/si-user-message.component.ts

@@ -4,7 +4,8 @@
  */
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { Component, effect, input, viewChild, ElementRef, computed, signal } from '@angular/core';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { elementOptionsVertical } from '@siemens/element-icons';
+import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 
@@ -51,6 +52,7 @@ import { SiChatMessageComponent } from './si-chat-message.component';
 })
 export class SiUserMessageComponent {
   protected readonly formattedContent = viewChild<ElementRef<HTMLDivElement>>('formattedContent');
+  protected readonly icons = addIcons({ elementOptionsVertical });
 
   /**
    * The user message content