From 994a98de9ed03941131122da024850a7e5db7f28 Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Thu, 17 Aug 2023 12:41:31 +0800
Subject: [PATCH 1/2] Add icon support to action sheet

---
 .../src/components/molecules/Dropdown/ActionSheet.tsx       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx
index af142880..fc3959f9 100644
--- a/components/src/components/molecules/Dropdown/ActionSheet.tsx
+++ b/components/src/components/molecules/Dropdown/ActionSheet.tsx
@@ -29,6 +29,10 @@ const ActionSheetOptions = styled.div(
 
 const ActionSheetItem = styled.div(
   ({ theme }) => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: ${theme.space['2']};
     width: 100%;
     padding: 20px;
     position: relative;
@@ -75,6 +79,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
               return DropdownChild({ item, setIsOpen })
             }
 
+            const icon = (item as DropdownItemObject).icon
             return (
               <ActionSheetItem
                 key={(item as DropdownItemObject).label}
@@ -85,6 +90,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
                   setIsOpen(false)
                 }}
               >
+                {icon}
                 <Typography>{(item as DropdownItemObject).label}</Typography>
               </ActionSheetItem>
             )

From fd143b0d1e1e55a7b930a8a6570d65997c4483aa Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Mon, 4 Sep 2023 19:16:34 +0800
Subject: [PATCH 2/2] add icons to dropdown docs

---
 .../reference/mdx/molecules/Dropdown.docs.mdx | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx
index 8a4f3271..f85e69c7 100644
--- a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx
+++ b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx
@@ -71,6 +71,14 @@ import { Dropdown } from '@ensdomains/thorin'
         raw: 'boolean | Colors',
       },
     },
+    icon: {
+      name: 'icon',
+      description: 'An icon that leads the label.',
+      type: {
+        raw: 'ReactNode'
+      }
+    }
+  
   }}
 />
 
@@ -266,3 +274,25 @@ import { Dropdown } from '@ensdomains/thorin'
   label="Custom"
 />
 ```
+
+## Items with icons
+
+```tsx live=true minHeight=300px
+<Dropdown
+  items={[
+    {
+      label: 'None',
+      onClick: () => null,
+      color: 'text',
+      icon: <DotGridSVG />,
+    },
+    {
+      label: 'Default',
+      onClick: () => null,
+      color: 'text',
+      icon: <CogSVG />,
+    },
+  ]}
+  label="Custom"
+/>
+```