reflect change to icons

components/FormField.vue

@@ -55,13 +55,13 @@ provide(formGroupExtras, {
           :id="name + '__label'"
           :for="name"
           class="block ms-1 mb-2"
-          :class="{ 'sr-only': srHideLabel }"
+          :class="{ 'sr-only': srHideLabel, 'flex mb-0': !!icon }"
         >
-          <Icon
+          <YIcon
             v-if="icon"
             :name="icon"
-            size="2em"
             aria-hidden="true"
+            size="2em"
             class="m-2"
           />
           <span :class="{ 'sr-only': !!icon }">{{ label }}</span>

components/SubmitButton.vue

@@ -16,9 +16,9 @@ const attrs = computed(() => {
       : props.text || t('save'),
     icon:
       props.loading === true
-        ? props.loadingIcon || 'mdi:loading'
+        ? props.loadingIcon || 'loading'
         : props.loading === false
-        ? 'mdi:thumb-up'
+        ? 'thumb-up'
         : props.icon,
     iconClass: props.loading ? 'animate-spin' : '',
     ...baseAttrs,

components/TextInputList.vue

@@ -46,7 +46,7 @@ function onAdd() {
         />
         <YButton
           variant="error"
-          icon="mdi:delete-forever"
+          icon="delete-forever"
           icon-size="2em"
           icon-only
           :text="$t('remove')"

components/YButton.vue

@@ -42,7 +42,7 @@ const variantClass = computed(() => {
     :type="$attrs.to ? null : type"
   >
     <slot name="default">
-      <Icon
+      <YIcon
         v-if="icon"
         :name="icon"
         :size="iconSize"

layouts/default.vue

@@ -86,7 +86,7 @@ async function logout() {
         <div class="flex flex-row flex-wrap items-center min-w-full">
           <NuxtLink to="/">
             <span class="sr-only">{{ t('back_to_apps') }}</span>
-            <Icon name="mdi:account-circle" size="5em" class="mr-3" />
+            <YIcon name="account-circle" size="5em" class="mr-3" />
           </NuxtLink>
 
           <div>
@@ -111,11 +111,11 @@ async function logout() {
 
           <YButton
             v-if="isLoggedIn"
-            icon="mdi:logout"
+            icon="logout"
             :text="t('logout')"
             @click.prevent="logout"
           />
-          <YButton v-else icon="mdi:login" :text="t('login')" to="/login" />
+          <YButton v-else icon="login" :text="t('login')" to="/login" />
         </div>
       </slot>
     </header>

pages/edit.vue

@@ -88,7 +88,7 @@ const onSubmit = handleSubmit(async (form) => {
     }
     feedback.value = {
       variant: 'error',
-      icon: 'mdi:alert',
+      icon: 'alert',
       message,
     }
   } else if (data.value) {
@@ -109,7 +109,7 @@ const onSubmit = handleSubmit(async (form) => {
     })
     feedback.value = {
       variant: 'success',
-      icon: 'mdi:thumb-up',
+      icon: 'thumb-up',
       message: t('user_profile_updated'),
     }
   }

pages/login.vue

@@ -57,7 +57,7 @@ const login = handleSubmit(async (form) => {
       <FormField
         name="username"
         :label="t('username')"
-        icon="mdi:account-circle"
+        icon="account-circle"
         class="mb-4"
         row
       >
@@ -72,7 +72,7 @@ const login = handleSubmit(async (form) => {
       <FormField
         name="password"
         :label="t('password')"
-        icon="mdi:lock"
+        icon="lock"
         class="mb-4"
         row
       >

pages/password.vue

@@ -37,7 +37,7 @@ const onSubmit = handleSubmit(async (form) => {
     <form novalidate class="my-10" @submit="onSubmit">
       <!-- FIXME replace with accessible component -->
       <div role="alert" class="alert alert-warning mb-10">
-        <Icon name="mdi:warning-outline" size="2em" />
+        <YIcon name="alert-outline" size="2em" />
         {{ $t('good_practices_about_user_password') }}
       </div>