diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index fa6134ac2..a8229831d 100644
--- a/doc/contextmenu/TemplateDoc.vue
+++ b/doc/contextmenu/TemplateDoc.vue
@@ -30,7 +30,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
@@ -106,7 +106,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+            <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
 </ContextMenu>
@@ -141,7 +141,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
@@ -231,7 +231,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 7371ad275..9066487d5 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -24,7 +24,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -112,7 +112,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+            <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
         </a>
     </template>
     <template #end>
@@ -145,7 +145,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -244,7 +244,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
diff --git a/doc/tieredmenu/TemplateDoc.vue b/doc/tieredmenu/TemplateDoc.vue
index 1a6279e85..8f864ba87 100644
--- a/doc/tieredmenu/TemplateDoc.vue
+++ b/doc/tieredmenu/TemplateDoc.vue
@@ -10,7 +10,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>
@@ -110,7 +110,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
 </TieredMenu>
@@ -125,7 +125,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>
@@ -230,7 +230,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>