Switch to matierial-symbols

material-design-icons was outdated and missing symbols. I've now switched, as recommended in the issue.

/closes #254

webapp/src/components/appContent.vue

@@ -33,9 +33,9 @@
               style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
               :src="item.iconURL"
             />
-            <i v-if="!item.iconURL" class="material-icons">
+            <span v-if="!item.iconURL" class="material-symbols-outlined">
               {{ item.icon }}
-            </i>
+            </span>
           </tabIcon>
           <!-- Add a divider if item.divide is true -->
           <hr v-if="item.divide" :key="'tab-divider-' + index" />
@@ -52,7 +52,9 @@
           :click-callback="updatePlugins"
           @set-tab="setTab"
         >
-          <i class="material-icons">{{ plugin.icon || "extension" }}</i>
+          <span class="material-symbols-outlined">{{
+            plugin.icon || "extension"
+          }}</span>
         </tabIcon>
 
         <tabIcon
@@ -69,9 +71,9 @@
             style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
             :src="imjoyTab.iconURL"
           />
-          <i v-if="!imjoyTab.iconURL" class="material-icons">
+          <span v-if="!imjoyTab.iconURL" class="material-symbols-outlined">
             {{ imjoyTab.iconName || "extension" }}
-          </i>
+          </span>
         </tabIcon>
 
         <hr id="extension-tab-divider" />
@@ -88,7 +90,7 @@
             :class="item.class"
             @set-tab="setTab"
           >
-            <i class="material-icons">{{ item.icon }}</i>
+            <span class="material-symbols-outlined">{{ item.icon }}</span>
           </tabIcon>
           <!-- Add a divider if item.divide is true -->
           <hr v-if="item.divide" :key="'tab-divider-' + index" />

webapp/src/components/fieldComponents/keyvalList.vue

@@ -32,7 +32,7 @@
           href="#"
           class="uk-icon uk-margin-left"
           @click="handleMetadataSubmit()"
-          ><i class="material-icons">add_circle</i></a
+          ><span class="material-symbols-outlined">add_circle</span></a
         >
       </div>
     </form>
@@ -51,7 +51,7 @@
         />
       </div>
       <a href="#" class="uk-icon uk-width-auto" @click="delMetadataKey(key)"
-        ><i class="material-icons">delete</i></a
+        ><span class="material-symbols-outlined">delete</span></a
       >
     </div>
   </div>

webapp/src/components/fieldComponents/tagList.vue

@@ -5,7 +5,7 @@
         <div class="uk-margin-remove-top uk-width-expand">
           <div class="uk-inline uk-width-1-1">
             <span class="uk-form-icon"
-              ><i class="material-icons">label</i></span
+              ><span class="material-symbols-outlined">label</span></span
             >
             <input
               v-model="newTag"
@@ -18,7 +18,7 @@
         </div>
 
         <a href="#" class="uk-icon uk-margin-left" @click="handleTagSubmit()"
-          ><i class="material-icons">add_circle</i></a
+          ><span class="material-symbols-outlined">add_circle</span></a
         >
       </div>
     </form>

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -11,7 +11,7 @@
         @keydown="keyDown"
       />
       <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
+        <span class="material-symbols-outlined">refresh</span>
       </a>
     </div>
     <div v-if="dataType == 'number_array'" class="input-and-buttons-container">
@@ -26,7 +26,7 @@
         @keydown="keyDown"
       />
       <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
+        <span class="material-symbols-outlined">refresh</span>
       </a>
     </div>
     <div v-if="dataType == 'number_object'" class="input-and-buttons-container">
@@ -41,7 +41,7 @@
         @keydown="keyDown"
       />
       <a class="button-next-to-input" @click="readProperty">
-        <i class="material-icons">refresh</i>
+        <span class="material-symbols-outlined">refresh</span>
       </a>
     </div>
     <div v-if="dataType == 'other'" class="input-and-buttons-container">

webapp/src/components/loadingContent.vue

@@ -6,7 +6,9 @@
       uk-spinner="ratio: 3"
     ></div>
     <div v-if="$store.state.waiting" class="uk-align-center">Loading...</div>
-    <i class="material-icons uk-align-center error-icon">error_outline</i>
+    <span class="material-symbols-outlined uk-align-center error-icon"
+      >error_outline</span
+    >
     <div v-if="$store.state.error" class="uk-align-center">
       {{ $store.state.error }}
     </div>

webapp/src/components/pluginComponents/JsonForm.vue

@@ -5,7 +5,7 @@
         {{ name }}
       </div>
       <a href="#" class="uk-icon uk-width-auto" @click="updateForm()"
-        ><i class="material-icons">cached</i></a
+        ><span class="material-symbols-outlined">cached</span></a
       >
     </div>
 

webapp/src/components/tabContentComponents/galleryComponents/captureCard.vue

@@ -26,7 +26,7 @@
         </div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
           <a href="#" class="uk-icon" @click="delCaptureConfirm()">
-            <i class="material-icons">delete</i>
+            <span class="material-symbols-outlined">delete</span>
           </a>
         </div>
       </div>
@@ -58,7 +58,8 @@
         <ul class="uk-nav uk-dropdown-nav">
           <li v-for="item in openInImjoyMenuItems" :key="item.name">
             <a href="#" @click="item.callback(name, imgURL)"
-              ><i class="material-icons">launch</i>{{ item.title }}</a
+              ><span class="material-symbols-outlined">launch</span
+              >{{ item.title }}</a
             >
           </li>
         </ul>
@@ -136,7 +137,9 @@
         @submit.prevent="handleTagSubmit"
       >
         <div class="uk-inline">
-          <span class="uk-form-icon"><i class="material-icons">label</i></span>
+          <span class="uk-form-icon"
+            ><span class="material-symbols-outlined">label</span></span
+          >
           <input
             v-model="newTag"
             autofocus

webapp/src/components/tabContentComponents/galleryComponents/scanCard.vue

@@ -27,7 +27,7 @@
         </div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
           <a href="#" class="uk-icon" @click="delAllConfirm()">
-            <i class="material-icons">delete</i>
+            <span class="material-symbols-outlined">delete</span>
           </a>
         </div>
       </div>
@@ -57,7 +57,8 @@
               href="#"
               style="color:black"
               @click="item.callback(name, allURLs)"
-              ><i class="material-icons">launch</i>{{ item.title }}</a
+              ><span class="material-symbols-outlined">launch</span
+              >{{ item.title }}</a
             >
           </li>
         </ul>

webapp/src/components/tabContentComponents/galleryContent.vue

@@ -12,12 +12,12 @@
         <ul class="uk-navbar-nav">
           <li :class="[sortDescending ? 'uk-active' : '']">
             <a class="uk-icon" href="#" @click="sortDescending = true">
-              <i class="material-icons">keyboard_arrow_down</i>
+              <span class="material-symbols-outlined">keyboard_arrow_down</span>
             </a>
           </li>
           <li :class="[!sortDescending ? 'uk-active' : '']">
             <a class="uk-icon" href="#" @click="sortDescending = false">
-              <i class="material-icons">keyboard_arrow_up</i>
+              <span class="material-symbols-outlined">keyboard_arrow_up</span>
             </a>
           </li>
           <li>
@@ -85,7 +85,7 @@
         class="gallery-folder-heading uk-flex uk-flex-middle"
       >
         <a class="uk-icon uk-margin-remove" href="#" @click="galleryBack()">
-          <i class="material-icons">arrow_back</i>
+          <span class="material-symbols-outlined">arrow_back</span>
         </a>
         <div class="uk-margin-left">
           <h3 class="uk-margin-remove uk-margin-left">

webapp/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue

@@ -13,9 +13,13 @@
             :alt="name + ' icon'"
             uk-img
           />
-          <i v-if="!iconURL" class="material-icons" style="font-size:50px">
+          <span
+            v-if="!iconURL"
+            class="material-symbols-outlined"
+            style="font-size:50px"
+          >
             {{ iconName }}
-          </i>
+          </span>
         </div>
         <div class="uk-width-expand">
           <h3 class="uk-card-title uk-margin-remove-bottom">{{ name }}</h3>

webapp/src/components/tabContentComponents/navigateComponents/paneNavigate.vue

@@ -104,7 +104,7 @@
                   @keyup.enter="startMoveTask"
                 />
                 <a class="button-next-to-input" @click="updatePosition">
-                  <i class="material-icons">refresh</i>
+                  <span class="material-symbols-outlined">refresh</span>
                 </a>
               </div>
               <p>