refactor(chat-messages): migrate to svg icons

spliffone · spliffone · commit e13708b503ad · 2026-02-06T10:39:26.000+01:00
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2e8c0c0e1d06a367e096a97ed1a106c37730f160127936e10777f20b418454f7
-size 13901
+oid sha256:87bca818ae96eb1f8e85f138e862646fc787a1cace67579b589a282f9dabb866
+size 13930
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-ai-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6bded6fa658ed46399df0e7b917beaef0f0109862a84ef4aedf53b3d8376e0c0
-size 13521
+oid sha256:753db3af7ac9e76c087f7f6da6bb37885fa892f55a7ef26291f93dbbfdab9359
+size 13585
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:079ef111409b25eabbb94a7c829acd8f4d8f1af1bd982391dbd32750daae03ac
-size 15106
+oid sha256:8d7da212e9e92db15c9facbbd76182887f618772ce7c17f95b1bd5f979f53ba4
+size 15265
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-attachment-list-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:529880552b44fd0082e5d8dc7e2db4fe6dd98c4eb30a3814f6d90437b97f93e0
-size 14547
+oid sha256:dc95bf5ca7aea3133bff198080adb1b37bab9789458fa05c1cb8df3e3c881c5a
+size 14723
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f3cbd550a90a00115a99840f34d53f7cb7f2ac15ea83d27b630bec82f1cb6c57
-size 46693
+oid sha256:002b53dbc5119446c0658c9d4e302818810a5cdf685bfad0778ecdfc91fa7e4c
+size 46781
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e53adbd646fd16737d95a524eefdb326ac8afbce5f51f412797b4631a8d4305
-size 45168
+oid sha256:f3f945e3128439372824c5226499de5485ea27dd86ad51fbfbd5eb9fc25766b1
+size 45237
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3ffae97ceee8c65d00dacd5a5414f88446e2a3e76ec9a70e6e961b1951fc7112
-size 15977
+oid sha256:a6e4ea3b7b4885b996072d1a134f6dc252b56bf9d4816dfacaf7bd87e76bb9da
+size 15992
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-input-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9eb31e15787c8d458cd826dbc9d606e316e253be7ca5c2871acf6b7cd6bf2ab9
-size 15679
+oid sha256:ecdb5c7bf46f0504041eefbb3ea91025948935d272e740de58028de0832db516
+size 15752
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6a9a2fa313fc5a6fdc59ad4bba8ac5b5f97bc7dd1b4216f70c5eea567d2eca2f
-size 21111
+oid sha256:6de6fc3807f942f4be73f70f63f44d5fc153763701852e924a9196508711c9f8
+size 21207
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91106ab022e01fd331ab41ebc3042d8af1a36572a85da80f98906f12a0b0decf
-size 20191
+oid sha256:d5e122c5281e09d8b672acf2ad5758b8d4c1520c92c7207d2dfc56a5398d28b2
+size 20107
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b344e77c11ab9577db73898a5ffde3ba3d1cf9a828a2f1ddefebc6d732dfffa
-size 14537
+oid sha256:e16910032892fcb3cb90409e190b1eee22f61c90fff8b7c85516a5698b303361
+size 14583
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-user-message-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:81d920ca7d45edc62585b6943f84221a7d1dd1f6cbdecd05ba30648e8e0ab889
-size 14225
+oid sha256:58dfa48dee58689efefba1c9629fd127a31186d16b693826b1e1f9b42026ca7c
+size 14224
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.html b/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>
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.ts b/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
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.html b/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>
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.ts b/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;
   }
 }
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.html b/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>
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.spec.ts b/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,7 @@ 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 +482,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();
   });
 });
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.ts b/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()
diff --git a/projects/element-ng/chat-messages/si-user-message.component.html b/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>
diff --git a/projects/element-ng/chat-messages/si-user-message.component.ts b/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
