refactor: Dropdown.Button icon prop (#24020)

ref #24017

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -11088,7 +11088,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
     type="button"
   >
     <span
@@ -11128,7 +11128,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-lg"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-lg config-btn-icon-only"
     type="button"
   >
     <span
@@ -11168,7 +11168,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
     </span>
   </button>
   <button
-    class="config-btn config-dropdown-trigger config-btn-default"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
     type="button"
   >
     <span
@@ -11208,7 +11208,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span
@@ -11248,7 +11248,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span

components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@@ -53,7 +53,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -90,7 +90,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -128,7 +128,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
       disabled=""
       type="button"
     >
@@ -166,28 +166,32 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only ant-btn-loading"
       type="button"
     >
       <span
-        aria-label="ellipsis"
+        class="ant-btn-loading-icon"
-        class="anticon anticon-ellipsis"
-        role="img"
       >
-        <svg
+        <span
-          aria-hidden="true"
+          aria-label="loading"
-          class=""
+          class="anticon anticon-loading"
-          data-icon="ellipsis"
+          role="img"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
         >
-          <path
+          <svg
-            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            aria-hidden="true"
-          />
+            class="anticon-spin"
-        </svg>
+            data-icon="loading"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+            />
+          </svg>
+        </span>
       </span>
     </button>
   </div>

components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@@ -15,7 +15,7 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
     type="button"
   />
   <button
-    class="ant-btn ant-dropdown-trigger ant-dropdown-rtl ant-btn-default ant-btn-rtl"
+    class="ant-btn ant-dropdown-trigger ant-dropdown-rtl ant-btn-default ant-btn-icon-only ant-btn-rtl"
     type="button"
   >
     <span
@@ -51,7 +51,7 @@ exports[`DropdownButton should support href like Button 1`] = `
     href="https://ant.design"
   />
   <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span

components/dropdown/demo/dropdown-button.md

@@ -58,7 +58,7 @@ ReactDOM.render(
         <Tooltip title="tooltip" key="leftButton">
           {leftButton}
         </Tooltip>,
-        rightButton,
+        React.cloneElement(rightButton, { loading: true }),
       ]}
     >
       With Tooltip

components/dropdown/dropdown-button.tsx

@@ -87,7 +87,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
       </Button>
     );
 
-    const rightButton = <Button type={type}>{icon}</Button>;
+    const rightButton = <Button type={type} icon={icon} />;
 
     const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);
 

components/dropdown/style/index.less

@@ -99,8 +99,8 @@
       cursor: pointer;
       transition: all 0.3s;
 
-      > .anticon:first-child,
+      > .@{iconfont-css-prefix}:first-child,
-      > span > .anticon:first-child {
+      > span > .@{iconfont-css-prefix}:first-child {
         min-width: 12px;
         margin-right: 8px;
         font-size: @font-size-sm;
@@ -250,10 +250,12 @@
 .@{dropdown-prefix-cls}-button {
   white-space: nowrap;
 
-  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
+  &.@{ant-prefix}-btn-group
+    > .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
     padding-right: @padding-xs;
     padding-left: @padding-xs;
   }
+
   .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
     .iconfont-size-under-12px(10px);
   }