diff --git a/packages/theme/src/client/components/Flyout/MenuGroup.vue b/packages/theme/src/client/components/Flyout/MenuGroup.vue
index eca00e29..c6965300 100644
--- a/packages/theme/src/client/components/Flyout/MenuGroup.vue
+++ b/packages/theme/src/client/components/Flyout/MenuGroup.vue
@@ -12,7 +12,7 @@ defineProps<{
   <div class="menu-group">
     <p v-if="text" class="title">
       <Icon v-if="icon" :name="icon" />
-      <span>{{ text }}</span>
+      <span v-text="text"></span>
     </p>
 
     <template v-for="item in items">
diff --git a/packages/theme/src/client/components/Flyout/MenuLink.vue b/packages/theme/src/client/components/Flyout/MenuLink.vue
index d8bdb94e..f30ce824 100644
--- a/packages/theme/src/client/components/Flyout/MenuLink.vue
+++ b/packages/theme/src/client/components/Flyout/MenuLink.vue
@@ -23,7 +23,7 @@ const page = usePageData()
       :href="item.link"
     >
       <Icon v-if="item.icon" :name="item.icon" />
-      <i>{{ item.text }}</i>
+      <i v-text="item.text"></i>
     </AutoLink>
   </div>
 </template>
diff --git a/packages/theme/src/client/components/Nav/NavBarMenuLink.vue b/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
index 03c5035f..f96723e3 100644
--- a/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -25,7 +25,7 @@ const page = usePageData()
     :no-icon="true"
   >
     <Icon v-if="item.icon" :name="item.icon" />
-    <i>{{ item.text }}</i>
+    <i v-text="item.text"></i>
   </AutoLink>
 </template>
 
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
index 47763ecd..ef2c0bc9 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue
@@ -31,7 +31,7 @@ function toggle() {
     >
       <span class="button-text">
         <Icon v-if="icon" :name="icon" />
-        {{ text }}
+        <i v-text="text"></i>
       </span>
       <IconPlus class="button-icon" />
     </button>
@@ -106,6 +106,10 @@ function toggle() {
   color: var(--vp-c-brand);
 }
 
+.button-text i {
+  font-style: normal;
+}
+
 .button-icon {
   width: 14px;
   height: 14px;
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
index fe104a58..a1a767ef 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
@@ -18,7 +18,7 @@ const closeScreen = inject('close-screen') as () => void
     @click="closeScreen"
   >
     <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
   </AutoLink>
 </template>
 
diff --git a/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue b/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
index b89d7e63..77d9f85a 100644
--- a/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/packages/theme/src/client/components/Nav/NavScreenMenuLink.vue
@@ -14,7 +14,7 @@ const closeScreen = inject('close-screen') as () => void
 <template>
   <AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
     <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
   </AutoLink>
 </template>