Switch to matierial-symbols

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

/closes #254

webapp/package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "imjoy-core": "^0.13",
         "material-design-icons": "^3.0",
+        "material-symbols": "^0.14.3",
         "mousetrap": "^1.6.5",
         "vue-observe-visibility": "^0.4"
       },
@@ -2147,25 +2148,73 @@
         "string.prototype.padstart": "^3.0.0"
       }
     },
-    "node_modules/@vue/compiler-sfc": {
+    "node_modules/@vue/compiler-core": {
-      "version": "2.7.16",
+      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.4.tgz",
-      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "integrity": "sha512-U5AdCN+6skzh2bSJrkMj2KZsVkUpgK8/XlxjSRYQZhNPcvt9/kmgIMpFEiTyK+Dz5E1J+8o8//BEIX+bakgVSw==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
-        "@babel/parser": "^7.23.5",
+        "@babel/parser": "^7.23.6",
-        "postcss": "^8.4.14",
+        "@vue/shared": "3.4.4",
-        "source-map": "^0.6.1"
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
       },
-      "optionalDependencies": {
+      "funding": {
-        "prettier": "^1.18.2 || ^2.0.0"
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.4.tgz",
+      "integrity": "sha512-iSwkdDULCN+Vr8z6uwdlL044GJ/nUmECxP9vu7MzEs4Qma0FwDLYvnvRcyO0ZITuu3Os4FptGUDnhi1kOLSaGw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.4.4",
+        "@vue/shared": "3.4.4"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.4.tgz",
+      "integrity": "sha512-OTFcU6vUxUNHBcarzkp4g6d25nvcmDvFDzPRvSrIsByFFPRYN+y3b+j9HxYwt6nlWvGyFCe0roeJdJlfYxbCBg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.4",
+        "@vue/compiler-dom": "3.4.4",
+        "@vue/compiler-ssr": "3.4.4",
+        "@vue/shared": "3.4.4",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.32",
+        "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-sfc/node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.4.32",
@@ -2186,6 +2235,8 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -2195,6 +2246,18 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.4.tgz",
+      "integrity": "sha512-1DU9DflSSQlx/M61GEBN+NbT/anUki2ooDo9IXfTckCeKA/2IKNhY8KbG3x6zkd3KGrxzteC7de6QL88vEb41Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.4",
+        "@vue/shared": "3.4.4"
+      }
+    },
     "node_modules/@vue/component-compiler-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz",
@@ -2263,6 +2326,14 @@
         "webpack": ">=4.0.0"
       }
     },
+    "node_modules/@vue/shared": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.4.tgz",
+      "integrity": "sha512-abSgiVRhfjfl3JALR/cSuBl74hGJ3SePgf1mKzodf1eMWLwHZbfEGxT2cNJSsNiw44jEgrO7bNkhchaWA7RwNw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -6304,6 +6375,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -9471,6 +9550,20 @@
         "lz-string": "bin/bin.js"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -9512,6 +9605,11 @@
       "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
       "integrity": "sha512-t19Z+QZBwSZulxptEu05kIm+UyfIdJY1JDwI+nx02j269m6W414whiQz9qfvQIiLrdx71RQv+T48nHhuQXOCIQ=="
     },
+    "node_modules/material-symbols": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.14.3.tgz",
+      "integrity": "sha512-oys7SbIaPz1sfUCMVYlEE5HJGzh0GMoUK0jCGH7hAqO9iW/b9dnSAeYgOQp2s1ifQP5Y+Q4+Fcujay/ASzvy2w=="
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -15195,6 +15293,54 @@
         "vue": "^2.6.10"
       }
     },
+    "node_modules/vue/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/vue/node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "node_modules/vue/node_modules/postcss": {
+      "version": "8.4.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
+      "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/vuejs-paginate": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vuejs-paginate/-/vuejs-paginate-2.1.0.tgz",

webapp/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "imjoy-core": "^0.13",
     "material-design-icons": "^3.0",
+    "material-symbols": "^0.14.3",
     "mousetrap": "^1.6.5",
     "vue-observe-visibility": "^0.4"
   },

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>

webapp/src/main.js

@@ -10,7 +10,7 @@ import VueObserveVisibility from "vue-observe-visibility";
 require("vue-tour/dist/vue-tour.css");
 
 // Import MD icons
-import "material-design-icons/iconfont/material-icons.css";
+import "material-symbols/outlined.css";
 
 // UIKit overrides
 UIkit.mixin(