diff --git a/src/Panel.vue b/src/Panel.vue
index 43aa2cf81..0f7290bd4 100644
--- a/src/Panel.vue
+++ b/src/Panel.vue
@@ -16,8 +16,7 @@
             <div :class="['card-header',{'header-toggle':isExpandableCard}, cardType, borderType]"
                  @click.prevent.stop="isExpandableCard && toggle()"
                  @mouseover="onHeaderHover = true" @mouseleave="onHeaderHover = false">
-                <div class="header-wrapper">
-                    <span :class="['glyphicon', localExpanded ? 'glyphicon-chevron-down' : 'glyphicon-chevron-right']" v-if="showCaret && hasCustomHeader" aria-hidden="true"></span>
+                <div class="header-wrapper" ref="headerWrapper">
                     <slot name="header">
                         <div :class="['card-title', cardType, {'text-white':!isLightBg}]" v-html="headerContent"></div>
                     </slot>
@@ -207,6 +206,10 @@
         return this.alt && md.render(this.alt) || this.renderedHeader;
       },
       renderedHeader () {
+        if (!this.header) {
+          return '';
+        }
+
         let htmlRenderedHeader = md.render(this.header).trim();
 
         if (this.isSeamless) {
@@ -216,19 +219,10 @@
           // if the header content is wrapped by a <p> or any <h1>, <h2>, ...
           // then it must be inserted inside these HTML tags, otherwise the
           // header content will not be in the same line as caret
-          const tags = [
-            ['<p>', '</p>'],
-            ['<h1>', '</h1>'],
-            ['<h2>', '</h2>'],
-            ['<h3>', '</h3>'],
-            ['<h4>', '</h4>'],
-            ['<h5>', '</h5>'],
-            ['<h6>', '</h6>']];
-
-          tags.forEach(header => {
-            if (!caretAdded && htmlRenderedHeader.startsWith(header[0]))  {
-              htmlRenderedHeader = jQuery(htmlRenderedHeader).unwrap().prepend(this.caretHtml + ' ')
-                .wrap(header[0] + header[1]).parent().html();
+          const tags = ['<p>', '<h1>', '<h2>', '<h3>', '<h4>', '<h5>', '<h6>'];
+          tags.forEach(tag => {
+            if (!caretAdded && htmlRenderedHeader.startsWith(tag))  {
+              htmlRenderedHeader = this.insertCaretInsideHeader(htmlRenderedHeader);
               caretAdded = true;
             }
           });
@@ -301,6 +295,11 @@
         if (isOpen && this.hasSrc) {
           this.$refs.retriever.fetch()
         }
+      },
+      insertCaretInsideHeader(originalHeaderHTML) {
+        const wrappedElementName = jQuery(originalHeaderHTML).attr("name");
+        return jQuery(originalHeaderHTML).unwrap().prepend(this.caretHtml + ' ')
+            .wrap(`<${wrappedElementName}></${wrappedElementName}>`).parent().html();
       }
     },
     watch: {
@@ -329,6 +328,11 @@
         if (this.hasSrc && (this.preloadBool || this.expandedBool)) {
           this.$refs.retriever.fetch()
         }
+
+        if (this.hasCustomHeader) {
+          this.$refs.headerWrapper.innerHTML =
+            this.insertCaretInsideHeader(this.$refs.headerWrapper.innerHTML);
+        }
       })
     },
   }