changes

app/components/media/ImageLayout.vue

@@ -22,13 +22,17 @@
             :class="['button px-5', { 'is-primary': layout === layoutMode }]"
             @click="layoutMode = layout"
           >
-            <SvgIcon
-              v-bind="{
-                name: `${layout}.svg`,
-                type: layout === layoutMode ? 'white' : 'primary',
-                size: 20,
-              }"
-            />
+            <span class="icon">
+              <Icon
+                :name="
+                  layout === 'grid'
+                    ? 'material-symbols:grid-view-outline-rounded'
+                    : 'material-symbols:format-list-bulleted-rounded'
+                "
+                :size="20"
+                :class="`has-text-${layout === layoutMode ? 'white' : 'primary'}`"
+              />
+            </span>
           </button>
         </div>
         <div
@@ -83,13 +87,19 @@
                 class="mr-3"
                 @click="excel()"
               >
-                <SvgIcon v-bind="{ name: 'excel.png', type: 'black', size: 20 }"></SvgIcon>
+                <Icon
+                  name="mdi:microsoft-excel"
+                  :size="20"
+                />
               </a>
               <a
                 v-if="$getEditRights()"
                 @click="importData()"
               >
-                <SvgIcon v-bind="{ name: 'upload.svg', type: 'black', size: 20 }"></SvgIcon>
+                <Icon
+                  name="material-symbols:upload-rounded"
+                  :size="20"
+                />
               </a>
             </span>
           </th>
@@ -155,14 +165,20 @@
           class="button is-rounded"
           style="left: 24px"
         >
-          <SvgIcon v-bind="{ name: 'left1.svg', type: 'black', size: 20 }" />
+          <Icon
+            name="material-symbols:arrow-back-ios-new-rounded"
+            :size="20"
+          />
         </button>
         <button
           @click="showNextImage()"
           class="button is-rounded"
           style="right: 24px"
         >
-          <SvgIcon v-bind="{ name: 'right.svg', type: 'black', size: 20 }" />
+          <Icon
+            name="material-symbols:arrow-forward-ios-rounded"
+            :size="20"
+          />
         </button>
       </div>
       <div class="gallery-count">
@@ -201,6 +217,7 @@ const { dealer } = useStore();
 const { $snackbar, $getdata, $insertapi, $deleteapi, $findapi, $getapi, $dayjs, $unique } = useNuxtApp();
 
 const layoutModes = { GRID: "grid", LIST: "list" };
+
 const layoutMode = ref(layoutModes.GRID);
 
 const convertToWebp = ref(false);