src/features/colorScheme/components/ColorSchemeButton.vue

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <script setup>
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { useSettings } from '@/features/settings/composables/useSettings';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -52,7 +52,7 @@ const setColorScheme = function setColorScheme(newColorScheme) {
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >
-        <Icon
+        <UIIcon
             :name="colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]]"
             size="16"
         />

src/features/i18n/components/LanguageSwitchButton.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { LANGUAGE_PATH } from '@/config/featureSettings';
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { useSettings } from '@/features/settings/composables/useSettings';
 import { setLocale, SUPPORTED_LANGUAGES } from '@/i18n';
 import { ref, watch } from 'vue';
@@ -68,7 +68,7 @@ const open = function open() {
         >
             <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
             <span class="chevron" :class="{ open: isOpen }">
-                <Icon name="chevron-down" size="1em" />
+                <UIIcon name="chevron-down" size="1em" />
             </span>
         </button>
 

src/features/search/components/SearchBar.vue

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <script setup>
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -52,7 +52,7 @@ const submitSearch = function submitSearch() {
                     :title="t('search.searchBar.submit')"
                     :aria-label="t('search.searchBar.submit')"
                 >
-                    <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
+                    <UIIcon class="search-icon" name="magnifying-glass" size="1.1em" />
                 </button>
             </div>
         </form>

src/features/settings/components/SettingsInput.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -93,7 +93,7 @@ const apply = function apply() {
                 :title="t('settings.input.done.title')"
                 :aria-label="t('settings.input.done.ariaLabel')"
             >
-                <Icon name="check-mark" />
+                <UIIcon name="check-mark" />
             </button>
         </form>
     </div>

src/features/settings/components/SettingsPageLink.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsPage } from '../composables/useSettingsPage';
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -46,7 +46,7 @@ const followLink = function followLink() {
         @click="followLink"
     >
         {{ props.displayName }}
-        <Icon name="chevron-right" size="1em" />
+        <UIIcon name="chevron-right" size="1em" />
     </button>
 </template>
 

src/features/settings/components/SettingsSelection.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 import { computed, useId } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -82,7 +82,7 @@ const labelId = useId();
                         v-model="selected"
                     >
                     <div class="option-check-mark-wrapper">
-                        <Icon class="option-check-mark" name="check-mark" size="1em" />
+                        <UIIcon class="option-check-mark" name="check-mark" size="1em" />
                     </div>
                     <div class="input-label">
                         {{ t(option.i18n) }}

src/features/sidebar/components/SidebarExpandButton.vue

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <script setup>
-import Icon from '@/features/icons/components/Icon.vue';
+import UIIcon from '@/features/icons/components/UIIcon.vue';
 
 const emit = defineEmits(['click']);
 
@@ -26,7 +26,7 @@ const click = function click(event) {
 
 <template>
     <button class="button sidebar-expand-button">
-        <Icon name="sidebar-expand" @click="click" />
+        <UIIcon name="sidebar-expand" @click="click" />
     </button>
 </template>