fix(menu): fix custom expand icon cannot be hidden

components/menu/__tests__/index.test.tsx

@@ -1047,4 +1047,63 @@ describe('Menu', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('expandIconClassName', () => {
+    const Demo = ({ expandIcon }: Pick<MenuProps, 'expandIcon'>) => (
+      <Menu
+        expandIcon={expandIcon}
+        inlineCollapsed
+        items={[
+          {
+            label: 'Option 1',
+            key: '1',
+            icon: '112',
+            children: [
+              {
+                label: 'Option 1-1',
+                key: '1-1',
+              },
+            ],
+          },
+        ]}
+      />
+    );
+
+    const { container, rerender } = render(
+      <Demo expandIcon={<span className="custom-expand-icon" />} />,
+    );
+    expect(container.querySelector('.custom-expand-icon')).toBeTruthy();
+
+    rerender(<Demo expandIcon={() => <span className="function-custom-expand-icon" />} />);
+    expect(container.querySelector('.function-custom-expand-icon')).toBeTruthy();
+  });
+
+  // https://github.com/ant-design/ant-design/issues/40041
+  it('should not show icon when inlineCollapsed', () => {
+    const { container } = render(
+      <Menu
+        expandIcon={<span className="bamboo">I</span>}
+        inlineCollapsed
+        items={[
+          {
+            label: 'Option 1',
+            key: '1',
+            icon: '112',
+            children: [
+              {
+                label: 'Option 1-1',
+                key: '1-1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(container.querySelector('.bamboo')).toBeTruthy();
+    expect(getComputedStyle(container.querySelector('.bamboo') as HTMLElement)).toHaveProperty(
+      'opacity',
+      '0',
+    );
+  });
 });

components/menu/menu.tsx

@@ -121,14 +121,23 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   const menuClassName = classNames(`${prefixCls}-${theme}`, className);
 
   // ====================== Expand Icon ========================
-  let mergedExpandIcon: MenuProps[`expandIcon`];
-  if (typeof expandIcon === 'function') {
-    mergedExpandIcon = expandIcon;
-  } else {
-    mergedExpandIcon = cloneElement(expandIcon || overrideObj.expandIcon, {
-      className: `${prefixCls}-submenu-expand-icon`,
-    });
-  }
+  const mergedExpandIcon: MenuProps[`expandIcon`] = (expandIconProps) => {
+    const nonUnderwriteExpandIcon: any =
+      typeof expandIcon === 'function'
+        ? expandIcon(expandIconProps)
+        : expandIcon || overrideObj.expandIcon;
+
+    if (nonUnderwriteExpandIcon || nonUnderwriteExpandIcon === 0) {
+      return cloneElement(nonUnderwriteExpandIcon, {
+        className: classNames(
+          `${prefixCls}-submenu-expand-icon`,
+          nonUnderwriteExpandIcon?.props?.className,
+        ),
+      });
+    }
+
+    return <i className={`${prefixCls}-submenu-arrow`} />;
+  };
 
   // ======================== Context ==========================
   const contextValue = React.useMemo<MenuContextProps>(

components/menu/style/vertical.tsx

@@ -184,7 +184,10 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
           paddingInline: `calc(50% - ${fontSizeSM}px)`,
           textOverflow: 'clip',
 
-          [`${componentCls}-submenu-arrow`]: {
+          [`
+            ${componentCls}-submenu-arrow,
+            ${componentCls}-submenu-expand-icon
+          `]: {
             opacity: 0,
           },