refactor: dynamic icon button with medusajs and customize icon

src/modules/layout/templates/vt-button/index.tsx

@@ -1,5 +1,6 @@
 import { Button, IconButton } from "@medusajs/ui"
-import { MagnifyingGlass, User, ShoppingBag, Heart } from "@medusajs/icons"
+import * as MedusaIcons from "@medusajs/icons"
+import * as CustomIcons from "@modules/common/icons"
 import {
   LayoutComponentDefinition,
   LayoutContext,
@@ -13,21 +14,20 @@ export default function VtButton({
   context: LayoutContext
 }) {
   const props = nodes.config || {}
-
-  const icons = {
-    search: MagnifyingGlass,
-    user: User,
-    cart: ShoppingBag,
-    heart: Heart
-  }
-  const Icon = props.icon && icons[props.icon as keyof typeof icons]
+  const iconName = props.icon as string | undefined
+  const IconComponent = iconName
+    ? (MedusaIcons as Record<string, any>)[iconName] ??
+      (CustomIcons as Record<string, any>)[iconName]
+    : undefined
   return (
     <>
       {props?.icon && (
         <IconButton className={props?.className ?? ""}>
-          <Icon />
+          {IconComponent && (
+            <IconComponent className={props?.iconClassName ?? ""} />
+          )}
           {props?.label && (
-            <span className="mr-2 text-[#11314E]">{props.label}</span>
+            <span className={props?.labelClassName ?? ""}>{props.label}</span>
           )}
         </IconButton>
       )}