From 21fbedaddc015395ba3af20f94313d838684f8e3 Mon Sep 17 00:00:00 2001
From: Stefanos Anagnostou <stefanos@clerk.dev>
Date: Mon, 16 Oct 2023 15:15:13 +0300
Subject: [PATCH] fix(clerk-js): Fix custom icons props

---
 .../clerk-js/src/ui/utils/ExternalElementMounter.tsx     | 9 +++++++--
 packages/clerk-js/src/ui/utils/createCustomPages.tsx     | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx b/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx
index a6c6325375..db29be4590 100644
--- a/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx
+++ b/packages/clerk-js/src/ui/utils/ExternalElementMounter.tsx
@@ -5,7 +5,7 @@ type ExternalElementMounterProps = {
   unmount: (el?: HTMLDivElement) => void;
 };
 
-export const ExternalElementMounter = ({ mount, unmount }: ExternalElementMounterProps) => {
+export const ExternalElementMounter = ({ mount, unmount, ...rest }: ExternalElementMounterProps) => {
   const nodeRef = useRef(null);
 
   useEffect(() => {
@@ -19,5 +19,10 @@ export const ExternalElementMounter = ({ mount, unmount }: ExternalElementMounte
     };
   }, [nodeRef.current]);
 
-  return <div ref={nodeRef}></div>;
+  return (
+    <div
+      ref={nodeRef}
+      {...rest}
+    ></div>
+  );
 };
diff --git a/packages/clerk-js/src/ui/utils/createCustomPages.tsx b/packages/clerk-js/src/ui/utils/createCustomPages.tsx
index 1f50917783..cff378eaf3 100644
--- a/packages/clerk-js/src/ui/utils/createCustomPages.tsx
+++ b/packages/clerk-js/src/ui/utils/createCustomPages.tsx
@@ -121,10 +121,11 @@ const getRoutesAndContents = ({ customPages, defaultRoutes }: GetRoutesAndConten
       return {
         name: cp.label,
         id: `custom-page-${index}`,
-        icon: () => (
+        icon: props => (
           <ExternalElementMounter
             mount={cp.mountIcon}
             unmount={cp.unmountIcon}
+            {...props}
           />
         ),
         path: sanitizeCustomLinkURL(cp.url),
@@ -137,10 +138,11 @@ const getRoutesAndContents = ({ customPages, defaultRoutes }: GetRoutesAndConten
       return {
         name: cp.label,
         id: `custom-page-${index}`,
-        icon: () => (
+        icon: props => (
           <ExternalElementMounter
             mount={cp.mountIcon}
             unmount={cp.unmountIcon}
+            {...props}
           />
         ),
         path: pageURL,