From 99ce13d1bb9b70c87fd489908598d2f561089952 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 13 Oct 2025 22:21:48 +0500
Subject: [PATCH] [Feat]: #1289 add close icon customization

---
 client/packages/lowcoder/src/comps/hooks/drawerComp.tsx | 8 +++++++-
 client/packages/lowcoder/src/i18n/locales/en.ts         | 4 +++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index 3b33c3fb9..1d89aa33d 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -24,6 +24,8 @@ import styled from "styled-components";
 import { useUserViewMode } from "util/hooks";
 import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
+import { IconControl } from "comps/controls/iconControl";
+import { hasIcon } from "comps/utils";
 import { title } from "process";
 import { SliderControl } from "../controls/sliderControl";
 import clsx from "clsx";
@@ -122,6 +124,7 @@ const childrenMap = {
   showMask: withDefault(BoolControl, true),
   toggleClose:withDefault(BoolControl,true),
   escapeClosable: withDefault(BoolControl, true),
+  closeIcon: withDefault(IconControl, ""),
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>> & {
@@ -138,6 +141,9 @@ const DrawerPropertyView = React.memo((props: {
       {props.children.title.getView() && props.children.titleAlign.propertyView({ label: trans("drawer.titleAlign"), radioButton: true })}
       {props.children.closePosition.propertyView({ label: trans("drawer.closePosition"), radioButton: true })}
       {props.children.placement.propertyView({ label: trans("drawer.placement"), radioButton: true })}
+      {props.children.toggleClose.getView() && props.children.closeIcon.propertyView({
+        label: trans("drawer.closeIcon"),
+      })}
       {["top", "bottom"].includes(props.children.placement.getView())
         ? props.children.autoHeight.getPropertyView()
         : props.children.width.propertyView({
@@ -262,7 +268,7 @@ const DrawerView = React.memo((
               $closePosition={props.closePosition}
               onClick={onClose}
             >
-              <CloseOutlined />
+              {hasIcon(props.closeIcon) ? props.closeIcon : <CloseOutlined />}
             </ButtonStyle>
           )}
           <InnerGrid
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 60095c146..48ec5d072 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2363,7 +2363,9 @@ export const en = {
     "openDrawerDesc": "Open Drawer",
     "closeDrawerDesc": "Close Drawer",
     "width": "Drawer Width",
-    "height": "Drawer Height"
+    "height": "Drawer Height",
+    "closeIcon": "Close Icon",
+
   },
   "meeting": {
     "logLevel": "Agora SDK Log Level",