docs(components): [message-box] add customized icon for examples (#8381)

docs/en-US/component/message-box.md

@@ -95,6 +95,16 @@ message-box/centered-content
 
 :::
 
+## Customized Icon
+
+The icon can be customized to any Vue component or [render function (JSX)](https://vuejs.org/guide/extras/render-function.html).
+
+:::demo
+
+message-box/customized-icon
+
+:::
+
 ## Draggable
 
 MessageBox can be draggable.

docs/examples/message-box/customized-icon.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-button text @click="open">Click to open Message Box</el-button>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+
+const open = () => {
+  ElMessageBox.confirm(
+    'It will permanently delete the file. Continue?',
+    'Warning',
+    {
+      type: 'warning',
+      icon: markRaw(Delete),
+    }
+  )
+}
+</script>