refactor: cart button with icon

src/modules/layout/components/cart-dropdown/index.tsx

@@ -9,6 +9,7 @@ import {
 import { convertToLocale } from "@lib/util/money"
 import { HttpTypes } from "@medusajs/types"
 import { Button } from "@medusajs/ui"
+import * as MedusaIcons from "@medusajs/icons"
 import DeleteButton from "@modules/common/components/delete-button"
 import LineItemOptions from "@modules/common/components/line-item-options"
 import LineItemPrice from "@modules/common/components/line-item-price"
@@ -19,8 +20,10 @@ import { Fragment, useEffect, useRef, useState } from "react"
 
 const CartDropdown = ({
   cart: cartState,
+  iconName,
 }: {
   cart?: HttpTypes.StoreCart | null
+  iconName?: string
 }) => {
   const [activeTimer, setActiveTimer] = useState<NodeJS.Timer | undefined>(
     undefined
@@ -73,6 +76,10 @@ const CartDropdown = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [totalItems, itemRef.current])
 
+  const Icon = iconName
+    ? (MedusaIcons as Record<string, React.ComponentType<any>>)[iconName]
+    : undefined
+
   return (
     <div
       className="h-full z-50"
@@ -81,11 +88,15 @@ const CartDropdown = ({
     >
       <Popover className="relative h-full">
         <PopoverButton className="h-full">
-          <LocalizedClientLink
-            className="hover:text-ui-fg-base"
-            href="/cart"
-            data-testid="nav-cart-link"
-          >{`Cart (${totalItems})`}</LocalizedClientLink>
+          {Icon ? (
+            <Icon />
+          ) : (
+            <LocalizedClientLink
+              className="hover:text-ui-fg-base"
+              href="/cart"
+              data-testid="nav-cart-link"
+            >{`Cart (${totalItems})`}</LocalizedClientLink>
+          )}
         </PopoverButton>
         <Transition
           show={cartDropdownOpen}