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/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>