diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md
index 6c4c2275c0..d556576981 100644
--- a/docs/en-US/component/date-picker.md
+++ b/docs/en-US/component/date-picker.md
@@ -130,6 +130,16 @@ date-picker/default-time
 
 :::
 
+## Set custom content of prefix
+
+The content of prefix can be customized.
+
+:::demo Setting `prefix-icon` to component which you import form other .vue or generated by the render function.
+
+date-picker/custom-prefix-icon
+
+:::
+
 ## Custom content
 
 The content of cell can be customized, in scoped-slot you can get the cell data.
diff --git a/docs/examples/date-picker/custom-prefix-icon.vue b/docs/examples/date-picker/custom-prefix-icon.vue
new file mode 100644
index 0000000000..0dd0ecb38a
--- /dev/null
+++ b/docs/examples/date-picker/custom-prefix-icon.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="demo-date-picker">
+    <div class="block">
+      <span class="demonstration">set prefix-icon</span>
+      <el-date-picker
+        v-model="value1"
+        type="date"
+        placeholder="Pick a day"
+        :prefix-icon="customPrefix"
+      >
+      </el-date-picker>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, shallowRef, h } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const customPrefix = shallowRef({
+      render() {
+        return h('p', 'pre')
+      },
+    })
+    const state = reactive({
+      disabledDate(time) {
+        return time.getTime() > Date.now()
+      },
+      value1: '',
+    })
+
+    return {
+      ...toRefs(state),
+      customPrefix,
+    }
+  },
+})
+</script>