refactor: update icon usage to use mdi imports for consistency

src/components/maintenance/master-detail-c/MasterDetailCCourseMobilePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card border class="d-flex flex-column h-100 rounded-0" flat width="100%">
     <v-toolbar color="transparent" density="compact" flat>
-      <v-btn icon="mdi-arrow-left" size="small" variant="text" @click="$emit('close')" />
+      <v-btn :icon="mdiArrowLeft" size="small" variant="text" @click="$emit('close')" />
       <v-toolbar-title class="text-subtitle-1 font-weight-bold">
         {{ semester?.semesterName || '課程明細' }}
       </v-toolbar-title>
@@ -36,7 +36,7 @@
             v-if="!isViewMode"
             color="primary"
             :disabled="isFormLocked"
-            prepend-icon="mdi-plus"
+            :prepend-icon="mdiPlus"
             size="small"
             variant="text"
             @click="$emit('add-course', semester.id)"
@@ -69,7 +69,7 @@
                 <v-btn
                   color="error"
                   :disabled="isFormLocked"
-                  icon="mdi-delete"
+                  :icon="mdiDelete"
                   size="small"
                   variant="text"
                   @click="$emit('delete-course', semester.id, idx)"
@@ -129,6 +129,7 @@
 </template>
 
 <script setup lang="ts">
+import { mdiArrowLeft, mdiDelete, mdiPlus } from '@mdi/js'
 import type { CourseRecord, SemesterRecord } from '@/stores/semesters'
 
 import { computed } from 'vue'