From 18b762b236bfe5d7c96ecb95048cec5d31b489e8 Mon Sep 17 00:00:00 2001
From: Visal In <invisal@gmail.com>
Date: Fri, 25 Sep 2026 13:06:26 +0100
Subject: [PATCH] fix(dropdown): preserve styles on element icons

---
 .changeset/bright-dropdown-icons.md                        | 5 +++++
 .../kumo-docs-astro/src/components/demos/DropdownDemo.tsx  | 7 +++++++
 packages/kumo/src/components/dropdown/dropdown.tsx         | 6 +++++-
 3 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/bright-dropdown-icons.md

diff --git a/.changeset/bright-dropdown-icons.md b/.changeset/bright-dropdown-icons.md
new file mode 100644
index 0000000000..6aa7b2fc88
--- /dev/null
+++ b/.changeset/bright-dropdown-icons.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Apply dropdown icon spacing and sizing to element icons while preserving their custom classes.
diff --git a/packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx b/packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx
index c5260c3f74..28774f5627 100644
--- a/packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx
@@ -9,6 +9,7 @@ import {
   GearIcon,
   BookOpenIcon,
   ArrowSquareOutIcon,
+  ArrowsClockwiseIcon,
   CopyIcon,
   PencilSimpleIcon,
   TrashIcon,
@@ -192,6 +193,12 @@ export function DropdownOnClickDemo() {
           >
             Rename
           </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={<ArrowsClockwiseIcon className="animate-spin" />}
+            onClick={() => setLastAction("Refreshed")}
+          >
+            Refresh
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item
             icon={TrashIcon}
diff --git a/packages/kumo/src/components/dropdown/dropdown.tsx b/packages/kumo/src/components/dropdown/dropdown.tsx
index 46436709e9..2fc507b50f 100644
--- a/packages/kumo/src/components/dropdown/dropdown.tsx
+++ b/packages/kumo/src/components/dropdown/dropdown.tsx
@@ -140,7 +140,11 @@ const DropdownMenuContent = React.forwardRef<
 
 const renderIconNode = (IconComponent?: Icon | React.ReactNode) => {
   if (!IconComponent) return null;
-  if (React.isValidElement(IconComponent)) return IconComponent;
+  if (React.isValidElement<{ className?: string }>(IconComponent)) {
+    return React.cloneElement(IconComponent, {
+      className: cn("mr-2 h-4 w-4", IconComponent.props.className),
+    });
+  }
   const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;
   return <Comp className="mr-2 h-4 w-4" />;
 };