diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index 8fb338850..8394dc342 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -3,6 +3,12 @@
     <van-badge content="5">
       <div class="child" />
     </van-badge>
+    <van-badge content="10">
+      <div class="child" />
+    </van-badge>
+    <van-badge content="Hot">
+      <div class="child" />
+    </van-badge>
     <van-badge dot>
       <div class="child" />
     </van-badge>
@@ -12,6 +18,9 @@
     <van-badge content="20" max="9">
       <div class="child" />
     </van-badge>
+    <van-badge content="50" max="20">
+      <div class="child" />
+    </van-badge>
     <van-badge content="200" max="99">
       <div class="child" />
     </van-badge>
@@ -21,12 +30,37 @@
     <van-badge content="5" color="#1989fa">
       <div class="child" />
     </van-badge>
+    <van-badge content="10" color="#1989fa">
+      <div class="child" />
+    </van-badge>
     <van-badge dot color="#1989fa">
       <div class="child" />
     </van-badge>
   </demo-block>
 
+  <demo-block :title="t('customContent')">
+    <van-badge>
+      <div class="child" />
+      <template #content>
+        <van-icon name="success" class="badge-icon" />
+      </template>
+    </van-badge>
+    <van-badge>
+      <div class="child" />
+      <template #content>
+        <van-icon name="cross" class="badge-icon" />
+      </template>
+    </van-badge>
+    <van-badge>
+      <div class="child" />
+      <template #content>
+        <van-icon name="down" class="badge-icon" />
+      </template>
+    </van-badge>
+  </demo-block>
+
   <demo-block :title="t('standalone')">
+    <van-badge content="20" style="margin-left: 16px" />
     <van-badge content="200" max="99" style="margin-left: 16px" />
   </demo-block>
 </template>
@@ -76,6 +110,7 @@ export default {
 
   .badge-icon {
     display: block;
+    margin-left: 0;
     font-size: 10px;
     line-height: 16px;
   }
diff --git a/src/badge/test/__snapshots__/demo.spec.js.snap b/src/badge/test/__snapshots__/demo.spec.js.snap
index 108c54e9b..b2109b53e 100644
--- a/src/badge/test/__snapshots__/demo.spec.js.snap
+++ b/src/badge/test/__snapshots__/demo.spec.js.snap
@@ -9,6 +9,20 @@ exports[`should render demo and match snapshot 1`] = `
       5
     </div>
   </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      10
+    </div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      Hot
+    </div>
+  </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
@@ -24,6 +38,13 @@ exports[`should render demo and match snapshot 1`] = `
       9+
     </div>
   </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      20+
+    </div>
+  </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
@@ -42,6 +63,15 @@ exports[`should render demo and match snapshot 1`] = `
       5
     </div>
   </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed"
+         style="background: rgb(25, 137, 250);"
+    >
+      10
+    </div>
+  </div>
   <div class="van-badge__wrapper">
     <div class="child">
     </div>
@@ -52,6 +82,37 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      <i class="van-badge__wrapper van-icon van-icon-success badge-icon">
+      </i>
+    </div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      <i class="van-badge__wrapper van-icon van-icon-cross badge-icon">
+      </i>
+    </div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child">
+    </div>
+    <div class="van-badge van-badge--fixed">
+      <i class="van-badge__wrapper van-icon van-icon-down badge-icon">
+      </i>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-badge"
+       style="margin-left: 16px;"
+  >
+    20
+  </div>
   <div class="van-badge"
        style="margin-left: 16px;"
   >