fix(app): fallback to synthetic icon for unknown provider IDs (#15295)

1 files changed, 4 insertions, 3 deletions

diff --git a/packages/ui/src/components/provider-icon.tsx b/packages/ui/src/components/provider-icon.tsx
index d653765a5..b2a99989c 100644
--- a/packages/ui/src/components/provider-icon.tsx
+++ b/packages/ui/src/components/provider-icon.tsx
@@ -1,14 +1,15 @@
 import type { Component, JSX } from "solid-js"
 import { splitProps } from "solid-js"
 import sprite from "./provider-icons/sprite.svg"
-import type { IconName } from "./provider-icons/types"
+import { iconNames, type IconName } from "./provider-icons/types"
 
 export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
-  id: IconName
+  id: string
 }
 
 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"
   return (
     <svg
       data-component="provider-icon"
@@ -18,7 +19,7 @@ export const ProviderIcon: Component<ProviderIconProps> = (props) => {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <use href={`${sprite}#${local.id}`} />
+      <use href={`${sprite}#${resolved}`} />
     </svg>
   )
 }