diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts
index 1a7390a04..d87521c89 100755
--- a/components/lib/accordion/Accordion.d.ts
+++ b/components/lib/accordion/Accordion.d.ts
@@ -174,6 +174,21 @@ export interface AccordionSlots {
      * Default slot to detect AccordionTab components.
      */
     default(): VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    togglericon(scope: {
+        /**
+         * Current index of the tab
+         */
+        index: number;
+        /**
+         * Whether the current tab is active
+         * @param {number} index - Current index of the tab
+         */
+        isTabActive: (index: number) => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index d1bbd7e27..f22088372 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/components/lib/accordion/Accordion.vue
@@ -21,6 +21,7 @@
                     v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
                 >
                     <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <component v-else-if="$slots.toggleicon" :is="$slots.toggleicon" :isTabActive="isTabActive(i)" :index="i"></component>
                     <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
                     <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
                     <span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 3f65fcdb4..5ceb6410b 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -300,6 +300,19 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Default slot to detect AccordionTab components."
+                        },
+                        {
+                            "name": "togglericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 text-primary-700\">index</span>: <span class=\"text-primary-500\">number</span>, <span class=\"text-primary-300\">// Current index of the tab</span>\n \t <span class=\"ml-3 text-primary-700\">isTabActive</span>: <span class=\"text-primary-500\">(<span class=\"text-primary-700\">index</span>: number) &rArr; void</span>, <span class=\"text-primary-300\">// Whether the current tab is active</span>\n}",
+                                    "description": "togglericon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom toggler icon template."
                         }
                     ]
                 },
diff --git a/doc/scrolltop/ElementDoc.vue b/doc/scrolltop/ElementDoc.vue
index b5db5e4ac..63157d4fe 100644
--- a/doc/scrolltop/ElementDoc.vue
+++ b/doc/scrolltop/ElementDoc.vue
@@ -18,8 +18,7 @@
                 :pt="{
                     root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
                     icon: {
-                        class: 'text-base',
-                        style: 'color: var(--primary-color-text)'
+                        class: 'text-base'
                     }
                 }"
             />
@@ -54,8 +53,7 @@ export default {
                 :pt="{
                     root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
                     icon: {
-                        class: 'text-base',
-                        style: 'color: var(--primary-color-text)'
+                        class: 'text-base'
                     }
                 }"
             />
@@ -81,8 +79,7 @@ export default {
                 :pt="{
                     root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
                     icon: {
-                        class: 'text-base',
-                        style: 'color: var(--primary-color-text)'
+                        class: 'text-base'
                     }
                 }"
             />
diff --git a/pages/index.vue b/pages/index.vue
index aff9363fa..3731f275e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,10 +13,6 @@
 </template>
 
 <script>
-definePageMeta({
-    layout: 'custom'
-});
-
 import EventBus from '@/layouts/AppEventBus';
 import AppNews from '@/layouts/AppNews';
 import AppTopBar from '@/layouts/AppTopBar.vue';
@@ -29,6 +25,11 @@ import ThemeSection from './landing/ThemeSection';
 import UsersSection from './landing/UsersSection';
 
 export default {
+    setup() {
+        definePageMeta({
+            layout: 'custom'
+        });
+    },
     props: {
         theme: {
             type: String,