From 1a7078a7a22e215bc225432688cd4f681dc65ae2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 15 Jul 2026 11:42:59 -0500
Subject: [PATCH] fix crash in multi-camera export dialog when a camera group
 has an invalid or default icon

---
 web/src/components/icons/IconPicker.tsx     | 6 +++++-
 web/src/components/overlay/ExportDialog.tsx | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/icons/IconPicker.tsx b/web/src/components/icons/IconPicker.tsx
index a4775ae21b..73f64527c3 100644
--- a/web/src/components/icons/IconPicker.tsx
+++ b/web/src/components/icons/IconPicker.tsx
@@ -153,11 +153,15 @@ export default function IconPicker({
 }
 
 type IconRendererProps = {
-  icon: IconType;
+  icon: IconType | undefined;
   size?: number;
   className?: string;
 };
 
 export function IconRenderer({ icon, size, className }: IconRendererProps) {
+  if (!icon) {
+    return null;
+  }
+
   return <>{React.createElement(icon, { size, className })}</>;
 }
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index d4f5b14a7b..0b0cb84c13 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -65,6 +65,7 @@ import { Textarea } from "../ui/textarea";
 import { useNavigate } from "react-router-dom";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { isReplayCamera } from "@/utils/cameraUtil";
+import { isValidIconName } from "@/utils/iconUtil";
 
 const EXPORT_OPTIONS = [
   "1",
@@ -1066,7 +1067,11 @@ export function ExportContent({
                                 }
                               >
                                 <IconRenderer
-                                  icon={LuIcons[group.icon]}
+                                  icon={
+                                    isValidIconName(group.icon)
+                                      ? LuIcons[group.icon]
+                                      : LuIcons.LuFolder
+                                  }
                                   className="mr-2 size-4 text-secondary-foreground"
                                 />
                                 <span className="truncate">{group.name}</span>