From ff02636a4b34487612ab097c51b4c23bf9b3dcdb Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Fri, 15 May 2026 15:44:09 +0800
Subject: [PATCH] fix(web): app icon in webapp (#36206)

---
 .../base/app-icon/__tests__/index.spec.tsx           | 12 ++++++++++--
 web/app/components/base/app-icon/index.tsx           |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/app-icon/__tests__/index.spec.tsx b/web/app/components/base/app-icon/__tests__/index.spec.tsx
index 4bbea1e0ae..54c1b8c361 100644
--- a/web/app/components/base/app-icon/__tests__/index.spec.tsx
+++ b/web/app/components/base/app-icon/__tests__/index.spec.tsx
@@ -26,9 +26,8 @@ describe('AppIcon', () => {
           super()
         }
 
-        // Mock basic functionality
         connectedCallback() {
-          this.innerHTML = '🤖'
+          this.innerHTML = this.getAttribute('id') || '🤖'
         }
       })
     }
@@ -51,6 +50,15 @@ describe('AppIcon', () => {
     expect(emojiElement?.getAttribute('id')).toBe('smile')
   })
 
+  it('updates the rendered emoji when icon changes', () => {
+    const { rerender } = render(<AppIcon icon="smile" />)
+    expect(document.querySelector('em-emoji')).toHaveTextContent('smile')
+
+    rerender(<AppIcon icon="robot" />)
+
+    expect(document.querySelector('em-emoji')).toHaveTextContent('robot')
+  })
+
   it('renders image when iconType is image and imageUrl is provided', () => {
     render(<AppIcon iconType="image" imageUrl="test-image.jpg" />)
     const imgElement = screen.getByAltText('app icon')
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 5c15179446..b08ac5e981 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -104,7 +104,8 @@ const AppIcon: FC<AppIconProps> = ({
   showEditIcon = false,
 }) => {
   const isValidImageIcon = iconType === 'image' && imageUrl
-  const Icon = (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id="🤖" />
+  const emojiIcon = (icon && icon !== '') ? icon : '🤖'
+  const Icon = <em-emoji key={emojiIcon} id={emojiIcon} />
   const wrapperRef = useRef<HTMLSpanElement>(null)
   const isHovering = useHover(wrapperRef)