From c8866e60ba0b626962d7aaf81379cd96ec6c857a Mon Sep 17 00:00:00 2001
From: Filip <34747899+neriousy@users.noreply.github.com>
Date: Sun, 1 Mar 2026 15:40:04 +0100
Subject: [PATCH] fix(app): make provider icon resolved id reactive (#15583)

---
 packages/ui/src/components/provider-icon.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/provider-icon.tsx b/packages/ui/src/components/provider-icon.tsx
index b2a99989c..edfdd0357 100644
--- a/packages/ui/src/components/provider-icon.tsx
+++ b/packages/ui/src/components/provider-icon.tsx
@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js"
-import { splitProps } from "solid-js"
+import { createMemo, splitProps } from "solid-js"
 import sprite from "./provider-icons/sprite.svg"
 import { iconNames, type IconName } from "./provider-icons/types"
 
@@ -9,7 +9,7 @@ export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
 
 export const ProviderIcon: Component<ProviderIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["id", "class", "classList"])
-  const resolved = iconNames.includes(local.id as IconName) ? local.id : "synthetic"
+  const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "synthetic"))
   return (
     <svg
       data-component="provider-icon"
@@ -19,7 +19,7 @@ export const ProviderIcon: Component<ProviderIconProps> = (props) => {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <use href={`${sprite}#${resolved}`} />
+      <use href={`${sprite}#${resolved()}`} />
     </svg>
   )
 }