From 3e97bd705b49d24a013194a726325f3c25c43c78 Mon Sep 17 00:00:00 2001
From: Befkadu1 <befkassefa@gmail.com>
Date: Thu, 4 Jan 2024 15:46:45 +0100
Subject: [PATCH 1/4] fix(list): avoid rendering icon when icon.name is
 undefined

---
 src/components/list/list-renderer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
index 7f143f062e..cd4ff17a52 100644
--- a/src/components/list/list-renderer.tsx
+++ b/src/components/list/list-renderer.tsx
@@ -147,7 +147,7 @@ export class ListRenderer {
                 data-index={index}
                 {...attributes}
             >
-                {item.icon ? this.renderIcon(this.config, item) : null}
+                {this.renderIcon(this.config, item)}
                 {this.getPrimaryComponent(item)}
                 {this.renderText(item)}
                 {this.twoLines && this.avatarList ? this.renderDivider() : null}
@@ -211,11 +211,15 @@ export class ListRenderer {
      * Render an icon for a list item
      * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
      * @param {ListItem} item the list item
-     * @returns {HTMLElement} the icon element
+     * @returns {HTMLElement | undefined} the icon element
      */
     private renderIcon = (config: ListRendererConfig, item: ListItem) => {
         const style: any = {};
         const name = getIconName(item.icon);
+        if (!name) {
+            return;
+        }
+
         const color = getIconColor(item.icon, item.iconColor);
 
         if (color) {

From e30c400bed947de03eafdc745c05159d5f892ffb Mon Sep 17 00:00:00 2001
From: Befkadu1 <befkassefa@gmail.com>
Date: Thu, 4 Jan 2024 15:47:06 +0100
Subject: [PATCH 2/4] fix(menu): avoid rendering icon when icon.name is
 undefined

---
 src/components/menu-list/menu-list-renderer.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/menu-list/menu-list-renderer.tsx b/src/components/menu-list/menu-list-renderer.tsx
index 21ff4be900..5046cae1db 100644
--- a/src/components/menu-list/menu-list-renderer.tsx
+++ b/src/components/menu-list/menu-list-renderer.tsx
@@ -139,7 +139,7 @@ export class MenuListRenderer {
                 data-index={index}
                 {...attributes}
             >
-                {item.icon ? this.renderIcon(this.config, item) : null}
+                {this.renderIcon(this.config, item)}
                 {this.renderText(item)}
                 {this.renderSubMenuIcon(item)}
                 {this.renderNotification(item)}
@@ -213,11 +213,15 @@ export class MenuListRenderer {
      * Render an icon for a list item
      * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
      * @param {MenuItem} item the list item
-     * @returns {HTMLElement} the icon element
+     * @returns {HTMLElement | undefined} the icon element
      */
     private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {
         const style: any = {};
         const name = getIconName(item.icon);
+        if (!name) {
+            return;
+        }
+
         const color = getIconColor(item.icon, item.iconColor);
 
         if (color) {

From 61713cf7e2ea7c27ab944733acaf1aed5488fdc7 Mon Sep 17 00:00:00 2001
From: Befkadu1 <befkassefa@gmail.com>
Date: Thu, 4 Jan 2024 15:48:18 +0100
Subject: [PATCH 3/4] fix(header): make sure icon name exist before rendering
 the icon

---
 src/components/header/header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 5d50fdbb38..17c03ab4c2 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -103,12 +103,12 @@ export class Header {
     }
 
     private renderIcon() {
-        if (!this.icon) {
+        const icon = getIconName(this.icon);
+
+        if (!icon) {
             return;
         }
 
-        const icon = getIconName(this.icon);
-
         return <limel-icon class="icon" badge={true} name={icon} />;
     }
 

From b34746ce48e232b0769da4066621866bcac6e18b Mon Sep 17 00:00:00 2001
From: Befkadu1 <befkassefa@gmail.com>
Date: Thu, 4 Jan 2024 15:49:30 +0100
Subject: [PATCH 4/4] refactor(picker): use the new icon interface

---
 src/components/picker/picker.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
index 2fe8886b0d..30d602ceef 100644
--- a/src/components/picker/picker.tsx
+++ b/src/components/picker/picker.tsx
@@ -321,15 +321,14 @@ export class Picker {
     }
 
     private createChip(listItem: ListItem): Chip {
-        const name = getIconName(listItem.icon);
-        const color = getIconFillColor(listItem.icon, listItem.iconColor);
-
         return {
             id: `${listItem.value}`,
             text: listItem.text,
             removable: true,
-            icon: name,
-            iconFillColor: color,
+            icon: {
+                name: getIconName(listItem.icon),
+                color: getIconFillColor(listItem.icon, listItem.iconColor),
+            },
             value: listItem,
         };
     }