diff --git a/components/collapse/CollapsePanel.vue b/components/collapse/CollapsePanel.vue
index d3edde855..63ff21961 100644
--- a/components/collapse/CollapsePanel.vue
+++ b/components/collapse/CollapsePanel.vue
@@ -21,7 +21,18 @@ export default {
       class: collapsePanelClassName,
       on: $listeners,
     }
-    return <RcCollapse.Panel {...rcCollapePanelProps} >{this.$slots.default}</RcCollapse.Panel>
+    const { default: defaultSlots, header } = this.$slots
+    return (
+      <RcCollapse.Panel {...rcCollapePanelProps} >
+        {defaultSlots}
+        {header ? (
+          <template slot='header'>
+            {header}
+          </template>
+        ) : null}
+
+      </RcCollapse.Panel>
+    )
   },
 }
 </script>
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index 3cad89c05..90cb0be6e 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -12,7 +12,10 @@ Customize the background, border and margin styles for each panel.
 <template>
   <div>
     <a-collapse defaultActiveKey="1" :bordered="false">
-      <a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
+      <a-collapse-panel key="1" :style="customStyle">
+        <template slot="header">
+          This is panel header 1<a-icon type="question-circle-o" />
+        </template>
         <p>{{text}}</p>
       </a-collapse-panel>
       <a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">
diff --git a/components/collapse/src/Panel.vue b/components/collapse/src/Panel.vue
index b2e1be2d0..3334deb02 100644
--- a/components/collapse/src/Panel.vue
+++ b/components/collapse/src/Panel.vue
@@ -36,6 +36,7 @@ export default {
       [`${prefixCls}-header`]: true,
       [headerClass]: headerClass,
     }
+    const headerCon = header || $slots.header
     const itemCls = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-active`]: isActive,
@@ -50,7 +51,7 @@ export default {
           aria-expanded={isActive}
         >
           {showArrow && <i class='arrow' />}
-          {header}
+          {headerCon}
         </div><transition
           {...transitionProps}
         >