refactor(chat): use icons from internal registry

simeonoff · simeonoff · commit 4db6d87a52b2 · 2025-09-03T17:38:15.000+03:00
diff --git a/src/components/chat/chat-input.ts b/src/components/chat/chat-input.ts
@@ -14,21 +14,12 @@ import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
-import { registerIconFromText } from '../icon/icon.registry.js';
 import IgcTextareaComponent from '../textarea/textarea.js';
 import type { ChatState } from './chat-state.js';
 import { styles } from './themes/input.base.css.js';
 import { all } from './themes/input.js';
 import { styles as shared } from './themes/shared/input/input.common.css.js';
-import {
-  attachmentIcon,
-  type ChatTemplateRenderer,
-  fileDocumentIcon,
-  fileImageIcon,
-  type IgcMessageAttachment,
-  sendButtonIcon,
-  starIcon,
-} from './types.js';
+import type { ChatTemplateRenderer, IgcMessageAttachment } from './types.js';
 import { getChatAcceptedFiles, getIconName } from './utils.js';
 
 type DefaultInputRenderers = {
@@ -117,12 +108,6 @@ export default class IgcChatInputComponent extends LitElement {
   constructor() {
     super();
     addThemingController(this, all);
-
-    registerIconFromText('attachment', attachmentIcon, 'material');
-    registerIconFromText('send-message', sendButtonIcon, 'material');
-    registerIconFromText('file-document', fileDocumentIcon, 'material');
-    registerIconFromText('file-image', fileImageIcon, 'material');
-    registerIconFromText('star-icon', starIcon, 'material');
   }
 
   protected override firstUpdated() {
@@ -239,7 +224,6 @@ export default class IgcChatInputComponent extends LitElement {
             <igc-icon
               slot="prefix"
               name=${getIconName(attachment.file?.type ?? attachment.type)}
-              collection="material"
             ></igc-icon>
             <span part="attachment-name">${attachment.name}</span>
           </igc-chip>
@@ -279,8 +263,7 @@ export default class IgcChatInputComponent extends LitElement {
         <label for="input_attachments" part="upload-button">
           <igc-icon-button
             variant="flat"
-            name="attachment"
-            collection="material"
+            name="attach_file"
             @click=${() => this._attachmentsButtonInputRef?.value?.click()}
           ></igc-icon-button>
           <input
@@ -305,8 +288,7 @@ export default class IgcChatInputComponent extends LitElement {
     return html`
       <igc-icon-button
         aria-label="Send message"
-        name="send-message"
-        collection="material"
+        name="send_message"
         variant="contained"
         part="send-button"
         ?disabled=${!this._chatState?.inputValue.trim() &&
diff --git a/src/components/chat/chat-message.ts b/src/components/chat/chat-message.ts
@@ -128,9 +128,15 @@ export default class IgcChatMessageComponent extends LitElement {
 
     return html`
       <div @click=${this._handleMessageActionClick}>
-        ${this._renderActionButton('copy', resourceStrings.reactionCopy)}
-        ${this._renderActionButton('like', resourceStrings.reactionLike)}
-        ${this._renderActionButton('dislike', resourceStrings.reactionDislike)}
+        ${this._renderActionButton(
+          'copy_content',
+          resourceStrings.reactionCopy
+        )}
+        ${this._renderActionButton('thumb_up', resourceStrings.reactionLike)}
+        ${this._renderActionButton(
+          'thumb_down',
+          resourceStrings.reactionDislike
+        )}
         ${this._renderActionButton(
           'regenerate',
           resourceStrings.reactionRegenerate
@@ -145,7 +151,6 @@ export default class IgcChatMessageComponent extends LitElement {
         id=${`${name}-button`}
         name=${name}
         variant="flat"
-        collection="material"
         @pointerenter=${({ target }: PointerEvent) =>
           showChatActionsTooltip(target as Element, tooltipMessage)}
       ></igc-icon-button>
diff --git a/src/components/chat/chat-state.ts b/src/components/chat/chat-state.ts
@@ -1,18 +1,13 @@
 import { createRef, type Ref } from 'lit/directives/ref.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
-import { registerIconFromText } from '../icon/icon.registry.js';
 import type IgcTextareaComponent from '../textarea/textarea.js';
 import type IgcChatComponent from './chat.js';
 import type { IgcChatComponentEventMap } from './chat.js';
-import {
-  copyIcon,
-  type IgcChatOptions,
-  type IgcMessage,
-  type IgcMessageAttachment,
-  regenerateIcon,
-  thumbDownIcon,
-  thumbUpIcon,
+import type {
+  IgcChatOptions,
+  IgcMessage,
+  IgcMessageAttachment,
 } from './types.js';
 import { type ChatAcceptedFileTypes, parseAcceptedFileTypes } from './utils.js';
 
@@ -189,10 +184,6 @@ export class ChatState {
    */
   constructor(chat: IgcChatComponent) {
     this._host = chat;
-    registerIconFromText('copy', copyIcon, 'material');
-    registerIconFromText('like', thumbUpIcon, 'material');
-    registerIconFromText('dislike', thumbDownIcon, 'material');
-    registerIconFromText('regenerate', regenerateIcon, 'material');
   }
 
   //#region Event handlers
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
@@ -373,7 +373,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
   private _renderSuggestionPrefix() {
     return html`
       <span slot="start">
-        <igc-icon name="star-icon" collection="material"></igc-icon>
+        <igc-icon name="auto_suggest"></igc-icon>
       </span>
     `;
   }
diff --git a/src/components/chat/message-attachments.ts b/src/components/chat/message-attachments.ts
@@ -8,20 +8,14 @@ import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import IgcIconComponent from '../icon/icon.js';
-import { registerIconFromText } from '../icon/icon.registry.js';
 import type { ChatState } from './chat-state.js';
 import { styles } from './themes/message-attachments.base.css.js';
 import { styles as shared } from './themes/shared/message-attachments.common.css.js';
-import {
-  type ChatTemplateRenderer,
-  closeIcon,
-  fileIcon,
-  type IgcChatOptions,
-  type IgcMessage,
-  type IgcMessageAttachment,
-  imageIcon,
-  moreIcon,
-  previewIcon,
+import type {
+  ChatTemplateRenderer,
+  IgcChatOptions,
+  IgcMessage,
+  IgcMessageAttachment,
 } from './types.js';
 import { createAttachmentURL, getFileExtension } from './utils.js';
 
@@ -88,12 +82,6 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
 
   constructor() {
     super();
-
-    registerIconFromText('close', closeIcon, 'material');
-    registerIconFromText('file', fileIcon, 'material');
-    registerIconFromText('image', imageIcon, 'material');
-    registerIconFromText('preview', previewIcon, 'material');
-    registerIconFromText('more', moreIcon, 'material');
   }
 
   private _handleHeaderClick = (attachment: IgcMessageAttachment) => {
@@ -110,16 +98,12 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
       this.message?.sender === this._chatState?.currentUserId;
     const iconName =
       attachment.type === 'image' || attachment.file?.type.startsWith('image/')
-        ? 'image'
-        : 'file';
+        ? 'image_thumbnail'
+        : 'document_thumbnail';
 
     return html`
       ${!isCurrentUser
-        ? html`<igc-icon
-            name=${iconName}
-            collection="material"
-            part="attachment-icon"
-          ></igc-icon>`
+        ? html`<igc-icon name=${iconName} part="attachment-icon"></igc-icon>`
         : nothing}
       <span part="file-name">${attachment.name}</span>
     `;
diff --git a/src/components/chat/types.ts b/src/components/chat/types.ts
@@ -145,32 +145,3 @@ export type ChatTemplateRenderer<T> = (ctx: {
   defaults: Partial<ChatRenderers>;
   options?: IgcChatOptions;
 }) => unknown;
-
-export const attachmentIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>';
-export const sendButtonIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>';
-export const closeIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
-export const fileIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>';
-export const imageIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>';
-export const moreIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"/></svg>';
-export const previewIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>';
-export const fileImageIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M6.75 1.5L5.3775 3H3C2.175 3 1.5 3.675 1.5 4.5V13.5C1.5 14.325 2.175 15 3 15H15C15.825 15 16.5 14.325 16.5 13.5V4.5C16.5 3.675 15.825 3 15 3H12.6225L11.25 1.5H6.75ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75Z"/></svg>';
-export const fileDocumentIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M4.5 1.5C3.675 1.5 3.0075 2.175 3.0075 3L3 15C3 15.825 3.6675 16.5 4.4925 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5H4.5ZM9.75 6.75V2.625L13.875 6.75H9.75Z"/></svg>';
-export const copyIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>';
-export const thumbUpIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>';
-export const thumbDownIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/></svg>';
-export const regenerateIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>';
-export const starIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25"><path d="M6.58624 4.76825C6.72103 4.41058 7.23629 4.41058 7.37112 4.76825L7.92907 6.24921C7.94973 6.30414 7.98177 6.35321 8.02248 6.39423C8.06524 6.43719 8.11758 6.47089 8.17626 6.49213L9.6841 7.04022C10.0484 7.17255 10.0484 7.67865 9.6841 7.81097L8.17626 8.35907C8.10738 8.38422 8.04729 8.42621 8.00109 8.48016C7.97045 8.51605 7.94595 8.55707 7.92907 8.60199L7.37112 10.0829C7.23629 10.4409 6.72103 10.4409 6.58624 10.0829L6.02828 8.60199C5.98589 8.48944 5.89559 8.40082 5.78106 8.35907L4.27322 7.81097C3.90893 7.67865 3.90893 7.17255 4.27322 7.04022L5.78106 6.49213C5.89559 6.45062 5.98589 6.36176 6.02828 6.24921L6.58624 4.76825Z" /><path d="M12.2095 8.05023C12.481 7.31659 13.519 7.31659 13.7905 8.05023L14.9144 11.0876C14.9997 11.3183 15.1816 11.5002 15.4123 11.5856L18.4496 12.7094C19.1835 12.9809 19.1835 14.019 18.4496 14.2905L15.4123 15.4142C15.1816 15.4997 14.9997 15.6816 14.9144 15.9123L13.7905 18.9496C13.519 19.6833 12.481 19.6833 12.2095 18.9496L11.0856 15.9123C11.0002 15.6816 10.8183 15.4997 10.5876 15.4142L7.55038 14.2905C6.81652 14.019 6.81652 12.9809 7.55038 12.7094L10.5876 11.5856C10.8183 11.5002 11.0002 11.3183 11.0856 11.0876L12.2095 8.05023Z" /><path d="M6.63354 16.7551C6.75942 16.415 7.24056 16.415 7.36645 16.7551L7.67638 17.5927C7.71597 17.6996 7.80029 17.7839 7.90725 17.8234L8.74487 18.1335C9.08504 18.2595 9.08504 18.7404 8.74487 18.8664L7.90725 19.1765C7.85857 19.1945 7.8146 19.2216 7.7774 19.256C7.73281 19.2973 7.69796 19.3488 7.67638 19.4072L7.36645 20.2448C7.24056 20.5849 6.75942 20.5849 6.63354 20.2448L6.3236 19.4072C6.3055 19.3583 6.27807 19.3141 6.2434 19.2768C6.2022 19.2326 6.15081 19.1979 6.09274 19.1765L5.25512 18.8664C4.91494 18.7404 4.91494 18.2595 5.25512 18.1335L6.09274 17.8234C6.1997 17.7839 6.28402 17.6996 6.3236 17.5927L6.63354 16.7551Z" /><path d="M18.3664 5.75507C18.2406 5.41498 17.7594 5.41498 17.6335 5.75507L17.3236 6.59271C17.284 6.69965 17.1997 6.78387 17.0928 6.82343L16.2551 7.13348C15.915 7.25946 15.915 7.74042 16.2551 7.86639L17.0928 8.17645C17.1997 8.216 17.284 8.30023 17.3236 8.40717L17.6335 9.24481C17.7594 9.5849 18.2406 9.5849 18.3664 9.24481L18.6764 8.40717C18.716 8.30023 18.8003 8.216 18.9072 8.17645L19.7449 7.86639C20.085 7.74042 20.085 7.25946 19.7449 7.13348L18.9072 6.82343C18.8003 6.78387 18.716 6.69965 18.6764 6.59271L18.3664 5.75507Z" /></svg>';
diff --git a/src/components/chat/utils.ts b/src/components/chat/utils.ts
@@ -57,7 +57,7 @@ export function getChatAcceptedFiles(
 }
 
 export function getIconName(fileType?: string) {
-  return fileType?.startsWith('image') ? 'file-image' : 'file-document';
+  return fileType?.startsWith('image') ? 'attach_image' : 'attach_document';
 }
 
 export function createAttachmentURL(attachment: IgcMessageAttachment): string {
diff --git a/src/components/icon/icon-references.ts b/src/components/icon/icon-references.ts
@@ -63,6 +63,88 @@ addIcon('expand', {
     collection: 'internal',
   },
 });
+addIcon('attach_file', {
+  default: {
+    name: 'attach_file',
+    collection: 'internal',
+  },
+  indigo: {
+    name: 'indigo_attach_file',
+    collection: 'internal',
+  },
+});
+addIcon('attach_document', {
+  default: {
+    name: 'document_filled',
+    collection: 'internal',
+  },
+});
+addIcon('attach_image', {
+  default: {
+    name: 'document_image',
+    collection: 'internal',
+  },
+});
+addIcon('auto_suggest', {
+  default: {
+    name: 'auto_suggest',
+    collection: 'internal',
+  },
+});
+addIcon('send_message', {
+  default: {
+    name: 'send',
+    collection: 'internal',
+  },
+});
+addIcon('image_thumbnail', {
+  default: {
+    name: 'image',
+    collection: 'internal',
+  },
+});
+addIcon('document_thumbnail', {
+  default: {
+    name: 'document_empty',
+    collection: 'internal',
+  },
+});
+addIcon('more_horiz', {
+  default: {
+    name: 'more_horiz',
+    collection: 'internal',
+  },
+});
+addIcon('open_in_new', {
+  default: {
+    name: 'open_in_new',
+    collection: 'internal',
+  },
+});
+addIcon('thumb_up', {
+  default: {
+    name: 'thumb_up',
+    collection: 'internal',
+  },
+});
+addIcon('thumb_down', {
+  default: {
+    name: 'thumb_down',
+    collection: 'internal',
+  },
+});
+addIcon('regenerate', {
+  default: {
+    name: 'reload',
+    collection: 'internal',
+  },
+});
+addIcon('copy_content', {
+  default: {
+    name: 'copy',
+    collection: 'internal',
+  },
+});
 addIcon('collapse', {
   default: {
     name: 'keyboard_arrow_up',
diff --git a/src/components/icon/internal-icons-lib.ts b/src/components/icon/internal-icons-lib.ts

Original file line number	Diff line number	Diff line change
`@@ -373,7 +373,7 @@ export default class IgcChatComponent extends EventEmitterMixin<`
`373`	`373`	`private _renderSuggestionPrefix() {`
`374`	`374`	return html`
`375`	`375`	`<span slot="start">`
`376`		`- <igc-icon name="star-icon" collection="material"></igc-icon>`
	`376`	`+ <igc-icon name="auto_suggest"></igc-icon>`
`377`	`377`	`</span>`
`378`	`378`	`;
`379`	`379`	`}`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export function getChatAcceptedFiles(`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`export function getIconName(fileType?: string) {`
`60`		`- return fileType?.startsWith('image') ? 'file-image' : 'file-document';`
	`60`	`+ return fileType?.startsWith('image') ? 'attach_image' : 'attach_document';`
`61`	`61`	`}`
`62`	`62`
`63`	`63`	`export function createAttachmentURL(attachment: IgcMessageAttachment): string {`