feat(Button): add icon slot (#8783)

src/button/Button.tsx

@@ -89,6 +89,10 @@ export default defineComponent({
         return renderLoadingIcon();
       }
 
+      if (slots.icon) {
+        return <div class={bem('icon')}>{slots.icon()}</div>;
+      }
+
       if (props.icon) {
         return (
           <Icon

src/button/README.md

@@ -144,8 +144,9 @@ app.use(Button);
 ### Slots
 
 | Name           | Description         |
-| ------- | ------------------- |
+| -------------- | ------------------- |
 | default        | Default slot        |
+| icon `v3.0.18` | Custom icon         |
 | loading        | Custom loading icon |
 
 ### Less Variables

src/button/README.zh-CN.md

@@ -167,8 +167,9 @@ app.use(Button);
 ### Slots
 
 | 名称           | 说明           |
-| ------- | -------------- |
+| -------------- | -------------- |
 | default        | 按钮内容       |
+| icon `v3.0.18` | 自定义图标     |
 | loading        | 自定义加载图标 |
 
 ### 样式变量

src/button/test/__snapshots__/index.spec.ts.snap

@@ -22,6 +22,21 @@ exports[`should render icon in the right side when setting icon-position to righ
 </button>
 `;
 
+exports[`should render icon slot correctly 1`] = `
+<button type="button"
+        class="van-button van-button--default van-button--normal"
+>
+  <div class="van-button__content">
+    <div class="van-button__icon">
+      Custom Icon
+    </div>
+    <span class="van-button__text">
+      Text
+    </span>
+  </div>
+</button>
+`;
+
 exports[`should render loading slot correctly 1`] = `
 <button type="button"
         class="van-button van-button--default van-button--normal van-button--loading"

src/button/test/index.spec.ts

@@ -86,3 +86,13 @@ test('should render icon in the right side when setting icon-position to right',
   });
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render icon slot correctly', () => {
+  const wrapper = mount(Button, {
+    slots: {
+      default: () => 'Text',
+      icon: () => 'Custom Icon',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});