From ec263840379f4462706c8562135635829a5139c6 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 26 Aug 2022 12:00:34 -0600
Subject: [PATCH 1/3] Use login menu from multinet-components

---
 package.json                 |   1 +
 src/App.vue                  |   2 +
 src/components/LoginMenu.vue | 164 -----------------------------------
 src/components/Sidebar.vue   |  10 ++-
 yarn.lock                    |   5 ++
 5 files changed, 16 insertions(+), 166 deletions(-)
 delete mode 100644 src/components/LoginMenu.vue

diff --git a/package.json b/package.json
index 4588496..2c6c65d 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "lodash": "^4.17.21",
     "material-design-icons-iconfont": "^5.0.1",
     "multinet": "0.21.7",
+    "multinet-components": "^0.0.1",
     "papaparse": "^5.3.0",
     "vue": "^2.7.0",
     "vue-gtag": "^1.2.1",
diff --git a/src/App.vue b/src/App.vue
index b35a6e4..ea3dd07 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,8 @@ import { defineComponent } from 'vue';
 import Sidebar from '@/components/Sidebar.vue';
 import apps from '@/assets/appregistry.json';
 
+import 'multinet-components/dist/style.css';
+
 export default defineComponent({
   name: 'App',
 
diff --git a/src/components/LoginMenu.vue b/src/components/LoginMenu.vue
deleted file mode 100644
index 6a41887..0000000
--- a/src/components/LoginMenu.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <v-menu
-    v-model="menu"
-    offset-x
-  >
-    <template #activator="{ on }">
-      <v-btn
-        icon
-        v-on="on"
-      >
-        <v-avatar
-          color="grey lighten-4"
-          size="36px"
-        >
-          <span v-if="userInfo">{{ userInitials }}</span>
-          <v-icon
-            v-else
-            color="grey"
-          >
-            account_circle
-          </v-icon>
-        </v-avatar>
-      </v-btn>
-    </template>
-
-    <v-card>
-      <v-list>
-        <v-list-item class="sign-in-item">
-          <v-list-item-action>
-            <v-btn
-              v-if="userInfo"
-              dark
-              color="grey darken-3"
-              @click="logout"
-            >
-              Log out
-            </v-btn>
-
-            <v-btn
-              v-else
-              class="google-sign-in"
-              dark
-              :ripple="false"
-              @click="login"
-            >
-              <span class="google-logo">
-                <img
-                  alt="Google"
-                  src="../assets/google_badge.svg"
-                >
-              </span>
-              <span class="button-text">
-                Sign in with Google
-              </span>
-            </v-btn>
-          </v-list-item-action>
-        </v-list-item>
-      </v-list>
-    </v-card>
-  </v-menu>
-</template>
-
-<script lang="ts">
-import oauthClient from '@/oauth';
-import store from '@/store';
-import {
-  computed, defineComponent, ref, watch,
-} from 'vue';
-
-import { useCurrentInstance } from '@/utils/use';
-
-export default defineComponent({
-  setup() {
-    const menu = ref(false);
-    const location = ref('');
-
-    store.dispatch.fetchUserInfo();
-    const userInfo = computed(() => store.state.userInfo);
-    const userInitials = computed(() => (userInfo.value !== null ? `${userInfo.value.first_name[0] || ''}${userInfo.value.last_name[0] || ''}` : ''));
-
-    watch(menu, () => {
-      if (menu.value) {
-        location.value = window.location.href;
-      }
-    });
-
-    function login() {
-      oauthClient.redirectToLogin();
-    }
-
-    const currentInstance = useCurrentInstance();
-    const router = currentInstance.proxy.$router;
-    async function logout() {
-      // Perform the logout action, then redirect the user to the home page.
-      // This is to prevent the logged-out user from continuing to look at, e.g.,
-      // workspaces or tables they may have been viewing at the time of logout.
-      await store.dispatch.logout();
-
-      // Avoid illegal duplicate navigation if we are already on the Home view.
-      if (router !== null && router.currentRoute.name !== 'home') {
-        router.push({ name: 'home' });
-      }
-    }
-
-    return {
-      menu,
-      location,
-      userInfo,
-      userInitials,
-      login,
-      logout,
-    };
-  },
-});
-</script>
-
-<style scoped>
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
-
-.v-btn.google-sign-in {
-  background: #4285F4 !important;
-  border: 2px solid transparent;
-  border-radius: 2px;
-  height: auto;
-  padding: 1px;
-}
-.v-btn.google-sign-in:active {
-  background: #3367D6 !important;
-}
-.v-btn.google-sign-in:focus {
-  border: 2px solid rgba(66, 133, 244, .3) !important;
-}
-.v-btn.google-sign-in:before {
-  display: none;
-}
-.v-btn.google-sign-in .google-logo {
-  height: 38px;
-  width: 38px;
-}
-.v-btn.google-sign-in .google-logo img {
-  height: auto;
-  margin-left: -1px;
-  width: 100%;
-}
-.v-btn.google-sign-in .button-text {
-  padding: 0 16px 0 18px;
-}
-.v-list-item.sign-in-item {
-  padding: 0 12px;
-}
-</style>
-
-<style>
-.v-btn.google-sign-in .v-btn__content {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 500;
-  height: 38px;
-  padding: 0;
-  text-transform: none;
-}
-.v-list-item.sign-in-item .v-list-item__action {
-  margin: 0 !important;
-}
-</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d149718..0b9aa7d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -35,7 +35,11 @@
         </router-link>
       </v-toolbar-title>
       <v-spacer />
-      <login-menu />
+      <login-menu
+        :store="store"
+        :oauth-client="oauthClient"
+        :user-info="userInfo"
+      />
     </v-toolbar>
 
     <WorkspaceDialog />
@@ -130,9 +134,10 @@ import store from '@/store';
 import WorkspaceDialog from '@/components/WorkspaceDialog.vue';
 import DeleteWorkspaceDialog from '@/components/DeleteWorkspaceDialog.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
-import LoginMenu from '@/components/LoginMenu.vue';
+import { LoginMenu } from 'multinet-components';
 import { CheckboxTable } from '@/types';
 import { useCurrentInstance } from '@/utils/use';
+import oauthClient from '@/oauth';
 
 export default defineComponent({
   components: {
@@ -203,6 +208,7 @@ export default defineComponent({
       route,
       workspaceDeleted,
       deleteWorkspace,
+      oauthClient,
     };
   },
 });
diff --git a/yarn.lock b/yarn.lock
index 315410c..69253b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6058,6 +6058,11 @@ multimatch@^2.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
+multinet-components@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/multinet-components/-/multinet-components-0.0.1.tgz#41c2e4c2e716ed37f9b54a6dc0ba03899c16d8e3"
+  integrity sha512-M8FSfeZetigiHbHz6bT0OTKT6aV3gzfNJODZGEBoVNp/axRk3aHTLfSJ86/KMxbl5guUvlj+z3n1lXc7yRSC4g==
+
 multinet@0.21.7:
   version "0.21.7"
   resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.21.7.tgz#657d1f42eff6b628b5472a3845b142644387f1cc"

From e6d1b524adfe8f26f43e256877a6e5b7a519c5a9 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 26 Aug 2022 13:31:00 -0600
Subject: [PATCH 2/3] Fix some missing icons and passthrough the store to the
 template

---
 public/index.html          | 1 +
 src/components/Sidebar.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/public/index.html b/public/index.html
index 911323d..c5dcc0b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
     <title>MultiNet – Visualizing Networks with Attributes</title>
   </head>
   <body>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 0b9aa7d..e9374f0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -209,6 +209,7 @@ export default defineComponent({
       workspaceDeleted,
       deleteWorkspace,
       oauthClient,
+      store,
     };
   },
 });

From 80eea7a7ff621ae78e5a0a9a86dfc98c07477e3c Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Fri, 26 Aug 2022 14:11:26 -0600
Subject: [PATCH 3/3] Use mdi-icons the same way we do in the other client
 applications

---
 package.json                                 |  1 -
 src/components/AboutDialog.vue               |  2 +-
 src/components/DeleteNetworkDialog.vue       |  2 +-
 src/components/DeleteTableDialog.vue         |  2 +-
 src/components/DeleteWorkspaceDialog.vue     |  2 +-
 src/components/DownloadDialog.vue            |  4 +--
 src/components/NetworkDialog.vue             |  4 +--
 src/components/NetworkMultiCSVUploadForm.vue | 14 +++++-----
 src/components/NetworkPanel.vue              |  4 +--
 src/components/NetworkUploadForm.vue         |  2 +-
 src/components/PermissionsDialog.vue         | 14 +++++-----
 src/components/Sidebar.vue                   |  2 +-
 src/components/TableDialog.vue               |  4 +--
 src/components/TablePanel.vue                |  4 +--
 src/components/WorkspaceDialog.vue           |  2 +-
 src/components/WorkspaceOptionMenu.vue       |  4 +--
 src/main.ts                                  |  1 -
 src/views/AQLWizard.vue                      |  2 +-
 src/views/FrontPage.vue                      |  6 ++---
 src/views/NetworkDetail.vue                  | 28 ++++++++++----------
 src/views/NodeDetail.vue                     | 24 ++++++++---------
 src/views/TableDetail.vue                    | 12 ++++-----
 src/views/WorkspaceDetail.vue                |  6 ++---
 src/vuetify.ts                               |  6 +----
 yarn.lock                                    |  5 ----
 25 files changed, 73 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index 2c6c65d..67d61ec 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "dayjs": "^1.9.1",
     "direct-vuex": "^0.10.4",
     "lodash": "^4.17.21",
-    "material-design-icons-iconfont": "^5.0.1",
     "multinet": "0.21.7",
     "multinet-components": "^0.0.1",
     "papaparse": "^5.3.0",
diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
index dc020a3..ab021b2 100644
--- a/src/components/AboutDialog.vue
+++ b/src/components/AboutDialog.vue
@@ -12,7 +12,7 @@
         v-on="on"
       >
         <v-icon size="18">
-          help
+          mdi-help-circle
         </v-icon>
       </v-btn>
     </template>
diff --git a/src/components/DeleteNetworkDialog.vue b/src/components/DeleteNetworkDialog.vue
index 1a0e839..b35cc7a 100644
--- a/src/components/DeleteNetworkDialog.vue
+++ b/src/components/DeleteNetworkDialog.vue
@@ -19,7 +19,7 @@
                 color="red accent-3"
                 size="20px"
               >
-                delete_sweep
+                mdi-delete-sweep
               </v-icon>
             </v-btn>
           </v-scroll-x-transition>
diff --git a/src/components/DeleteTableDialog.vue b/src/components/DeleteTableDialog.vue
index b1ade67..4cab93e 100644
--- a/src/components/DeleteTableDialog.vue
+++ b/src/components/DeleteTableDialog.vue
@@ -19,7 +19,7 @@
                 color="red accent-3"
                 size="20px"
               >
-                delete_sweep
+                mdi-delete-sweep
               </v-icon>
             </v-btn>
           </v-scroll-x-transition>
diff --git a/src/components/DeleteWorkspaceDialog.vue b/src/components/DeleteWorkspaceDialog.vue
index 39a1c6a..9ee3f7a 100644
--- a/src/components/DeleteWorkspaceDialog.vue
+++ b/src/components/DeleteWorkspaceDialog.vue
@@ -21,7 +21,7 @@
               <v-icon
                 right
               >
-                delete_sweep
+                mdi-delete-sweep
               </v-icon>
             </v-btn>
           </v-fade-transition>
diff --git a/src/components/DownloadDialog.vue b/src/components/DownloadDialog.vue
index 985463f..5919c5d 100644
--- a/src/components/DownloadDialog.vue
+++ b/src/components/DownloadDialog.vue
@@ -18,7 +18,7 @@
                 color="primary"
                 size="20px"
               >
-                save_alt
+                mdi-tray-arrow-down
               </v-icon>
             </v-btn>
           </v-scroll-x-transition>
@@ -51,7 +51,7 @@
                   color="green accent-4"
                   size="18"
                 >
-                  check
+                  mdi-check
                 </v-icon>
               </v-list-item-icon>
               {{ item }}
diff --git a/src/components/NetworkDialog.vue b/src/components/NetworkDialog.vue
index b243bc8..ef382fb 100644
--- a/src/components/NetworkDialog.vue
+++ b/src/components/NetworkDialog.vue
@@ -12,7 +12,7 @@
           v-on="on"
         >
           <v-icon dark>
-            library_add
+            mdi-plus-box-multiple
           </v-icon>
         </v-btn>
       </template>
@@ -37,7 +37,7 @@
           v-on="on"
         >
           <v-icon dark>
-            add_circle
+            mdi-plus-circle
           </v-icon>
         </v-btn>
       </template>
diff --git a/src/components/NetworkMultiCSVUploadForm.vue b/src/components/NetworkMultiCSVUploadForm.vue
index 298211f..84f908a 100644
--- a/src/components/NetworkMultiCSVUploadForm.vue
+++ b/src/components/NetworkMultiCSVUploadForm.vue
@@ -2,7 +2,7 @@
   <v-card>
     <v-card-title>Create from Existing Tables</v-card-title>
     <v-card-subtitle>
-      Link edge tables with node tables by clicking the <v-icon>link</v-icon> icon on
+      Link edge tables with node tables by clicking the <v-icon>mdi-link</v-icon> icon on
       the desired edge table, and selecting the node table column that you'd like to link it to.
     </v-card-subtitle>
     <v-progress-linear
@@ -124,7 +124,7 @@
                           dark
                           @click="excludedMap[sample.table.name][col] = true"
                         >
-                          check_box
+                          mdi-checkbox-marked
                         </v-icon>
                         <v-icon
                           v-else
@@ -132,7 +132,7 @@
                           :disabled="checkboxDisabled(sample.table, col)"
                           @click="excludedMap[sample.table.name][col] = false"
                         >
-                          check_box_outline_blank
+                          mdi-checkbox-blank-outline
                         </v-icon>
 
                         <!-- Column name -->
@@ -151,7 +151,7 @@
                               :class="{'disable-events': linkDisabled(sample.table)}"
                               v-on="on"
                             >
-                              link
+                              mdi-link
                             </v-icon>
                           </template>
                           <v-card max-height="30vh">
@@ -200,7 +200,7 @@
                                       right
                                       @click.stop="removeColumnLink(sample.table, col)"
                                     >
-                                      <v-icon>close</v-icon>
+                                      <v-icon>mdi-close</v-icon>
                                     </v-btn>
                                   </v-list-item>
                                 </template>
@@ -230,7 +230,7 @@
                               dark
                               v-on="on"
                             >
-                              call_merge
+                              mdi-call-merge
                             </v-icon>
                           </template>
                           <v-card max-height="30vh">
@@ -256,7 +256,7 @@
                                     right
                                     @click.stop="removeColumnLink(sample.table, col, true)"
                                   >
-                                    <v-icon>close</v-icon>
+                                    <v-icon>mdi-close</v-icon>
                                   </v-btn>
                                 </v-list-item>
                               </template>
diff --git a/src/components/NetworkPanel.vue b/src/components/NetworkPanel.vue
index fb14ef1..2c30da2 100644
--- a/src/components/NetworkPanel.vue
+++ b/src/components/NetworkPanel.vue
@@ -48,7 +48,7 @@
       class="ws-detail-empty-list"
     >
       <v-icon color="blue lighten-1">
-        info
+        mdi-information
       </v-icon> There's nothing here yet...
     </div>
 
@@ -70,7 +70,7 @@
                 v-if="!hover && !checkbox[item.name]"
                 class="item-icon"
               >
-                timeline
+                mdi-chart-timeline-variant
               </v-icon>
 
               <v-checkbox
diff --git a/src/components/NetworkUploadForm.vue b/src/components/NetworkUploadForm.vue
index 75c81cd..fd419d4 100644
--- a/src/components/NetworkUploadForm.vue
+++ b/src/components/NetworkUploadForm.vue
@@ -11,7 +11,7 @@
             label="Select network file"
             outlined
             prepend-icon=""
-            prepend-inner-icon="attach_file"
+            prepend-inner-icon="mdi-paperclip"
             single-line
             @change="handleFileInput"
           />
diff --git a/src/components/PermissionsDialog.vue b/src/components/PermissionsDialog.vue
index fee9a07..b30c37b 100644
--- a/src/components/PermissionsDialog.vue
+++ b/src/components/PermissionsDialog.vue
@@ -10,7 +10,7 @@
         v-on="on"
       >
         <v-list-item-icon class="mr-3">
-          <v-icon>vpn_key</v-icon>
+          <v-icon>mdi-key</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
           Permissions
@@ -72,7 +72,7 @@
                   v-on="on"
                   @click="addSelectedUsers"
                 >
-                  <v-icon>add</v-icon>
+                  <v-icon>mdi-plus</v-icon>
                 </v-btn>
               </template>
               <span>Add selected</span>
@@ -101,7 +101,7 @@
                   hide-details
                   dense
                   placeholder="change all to"
-                  prepend-icon="more_horiz"
+                  prepend-icon="mdi-dots-horizontal"
                   @input="setRoleForAllUsers(singularRoleToPlural($event))"
                 />
               </v-col>
@@ -114,7 +114,7 @@
             class="px-0"
           >
             <v-list-item-avatar>
-              <v-icon>account_circle</v-icon>
+              <v-icon>mdi-account-circle</v-icon>
             </v-list-item-avatar>
             <v-list-item-content>
               <v-list-item-title class="blue--text text--darken-2">
@@ -129,7 +129,7 @@
                 dense
                 :value="pluralRoleToSingular(role)"
                 :disabled="role === 'owner'"
-                prepend-icon="lock"
+                prepend-icon="mdi-lock"
                 @input="setRoleForUser(user, role, singularRoleToPlural($event))"
               />
             </v-list-item-action>
@@ -139,7 +139,7 @@
                 :disabled="role === 'owner'"
                 @click="removeUserPermissions(user, role)"
               >
-                <v-icon>close</v-icon>
+                <v-icon>mdi-close</v-icon>
               </v-btn>
             </v-list-item-action>
           </v-list-item>
@@ -165,7 +165,7 @@
                 class="ml-2 mb-1"
                 v-on="on"
               >
-                help
+                mdi-help-circle
               </v-icon>
             </template>
             <v-card width="20vw">
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e9374f0..73acbe2 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -87,7 +87,7 @@
                       v-if="!hover && !checkbox[space.name]"
                       class="workspace-icon"
                     >
-                      library_books
+                      mdi-text-box-multiple
                     </v-icon>
 
                     <v-checkbox
diff --git a/src/components/TableDialog.vue b/src/components/TableDialog.vue
index a1b46b1..aa730f7 100644
--- a/src/components/TableDialog.vue
+++ b/src/components/TableDialog.vue
@@ -13,7 +13,7 @@
         v-on="on"
       >
         <v-icon dark>
-          add_circle
+          mdi-plus-circle
         </v-icon>
       </v-btn>
     </template>
@@ -49,7 +49,7 @@
                     <v-file-input
                       v-model="selectedFile"
                       label="Upload File"
-                      prepend-inner-icon="attach_file"
+                      prepend-inner-icon="mdi-paperclip"
                       prepend-icon=""
                       single-line
                       clearable
diff --git a/src/components/TablePanel.vue b/src/components/TablePanel.vue
index 41f12ac..72534ac 100644
--- a/src/components/TablePanel.vue
+++ b/src/components/TablePanel.vue
@@ -48,7 +48,7 @@
       class="ws-detail-empty-list"
     >
       <v-icon color="blue lighten-1">
-        info
+        mdi-information
       </v-icon> There's nothing here yet...
     </div>
 
@@ -70,7 +70,7 @@
                 v-if="!hover && !checkbox[item.name]"
                 class="item-icon"
               >
-                table_chart
+                mdi-table
               </v-icon>
 
               <v-checkbox
diff --git a/src/components/WorkspaceDialog.vue b/src/components/WorkspaceDialog.vue
index 7e5f8e7..297a32a 100644
--- a/src/components/WorkspaceDialog.vue
+++ b/src/components/WorkspaceDialog.vue
@@ -28,7 +28,7 @@
           dark
           size="20px"
         >
-          add_circle
+          mdi-plus-circle
         </v-icon>
       </v-btn>
     </template>
diff --git a/src/components/WorkspaceOptionMenu.vue b/src/components/WorkspaceOptionMenu.vue
index 9ff6633..02f8a04 100644
--- a/src/components/WorkspaceOptionMenu.vue
+++ b/src/components/WorkspaceOptionMenu.vue
@@ -11,7 +11,7 @@
         icon
         v-on="on"
       >
-        <v-icon>more_vert</v-icon>
+        <v-icon>mdi-dots-vertical</v-icon>
       </v-btn>
     </template>
     <v-card>
@@ -23,7 +23,7 @@
         <PermissionsDialog :workspace="workspace" />
         <v-list-item :to="{ name: 'aqlWizard' }">
           <v-list-item-icon class="mr-3">
-            <v-icon>search</v-icon>
+            <v-icon>mdi-magnify</v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             AQL Wizard
diff --git a/src/main.ts b/src/main.ts
index abbe803..db23a5a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import Vue from 'vue';
 import App from './App.vue';
 import api from './api';
diff --git a/src/views/AQLWizard.vue b/src/views/AQLWizard.vue
index 6224710..a38efba 100644
--- a/src/views/AQLWizard.vue
+++ b/src/views/AQLWizard.vue
@@ -34,7 +34,7 @@
               >
                 <v-list-item-icon class="ma-0 mt-1">
                   <v-icon small>
-                    {{ network ? "timeline" : "table_chart" }}
+                    {{ network ? "mdi-chart-timeline-variant" : "mdi-table" }}
                   </v-icon>
                 </v-list-item-icon>
                 {{ name }}
diff --git a/src/views/FrontPage.vue b/src/views/FrontPage.vue
index 3def116..45b3ae1 100644
--- a/src/views/FrontPage.vue
+++ b/src/views/FrontPage.vue
@@ -62,7 +62,7 @@
               @click="login"
             >
               <v-icon x-large>
-                file_upload
+                mdi-upload
               </v-icon>
             </v-btn>
             Sign up and upload your own data
@@ -76,7 +76,7 @@
               x-large
               class="pr-1"
             >
-              videogame_asset
+              mdi-gamepad-square
             </v-icon>
             Try a demo below or explore the public workspaces
           </v-col>
@@ -98,7 +98,7 @@
                   v-on="on"
                 >
                   <v-icon x-large>
-                    info
+                    mdi-information
                   </v-icon>
                 </v-btn>
               </template>
diff --git a/src/views/NetworkDetail.vue b/src/views/NetworkDetail.vue
index a0c7046..47a05c9 100644
--- a/src/views/NetworkDetail.vue
+++ b/src/views/NetworkDetail.vue
@@ -16,7 +16,7 @@
           class="ml-4 mr-5"
           color="grey lighten-1"
         >
-          library_books
+          mdi-text-box-multiple
         </v-icon>
 
         <span class="breadcrumbs">
@@ -29,11 +29,11 @@
           <v-icon
             class="mx-4"
             color="grey lighten-2"
-          >chevron_right</v-icon>
+          >mdi-chevron-right</v-icon>
           <v-icon
             class="mr-3"
             color="grey lighten-1"
-          >timeline</v-icon>
+          >mdi-chart-timeline-variant</v-icon>
           {{ network }}
         </span>
       </v-toolbar-title>
@@ -96,7 +96,7 @@
               >
                 <v-list-item-avatar class="mr-3">
                   <v-icon color="blue lighten-3">
-                    exit_to_app
+                    mdi-exit-to-app
                   </v-icon>
                 </v-list-item-avatar>
                 <v-list-item-title>
@@ -104,7 +104,7 @@
                 </v-list-item-title>
                 <v-list-item-icon>
                   <v-icon color="blue lighten-3">
-                    chevron_right
+                    mdi-chevron-right
                   </v-icon>
                 </v-list-item-icon>
               </v-list-item>
@@ -150,7 +150,7 @@
                         color="grey lighten-1"
                         size="18"
                       >
-                        scatter_plot
+                        mdi-scatter-plot
                       </v-icon>
                     </v-list-item-avatar>
                     <v-list-item-title>
@@ -158,7 +158,7 @@
                     </v-list-item-title>
                     <v-list-item-icon>
                       <v-icon color="grey lighten-1">
-                        chevron_right
+                        mdi-chevron-right
                       </v-icon>
                     </v-list-item-icon>
                   </v-list-item>
@@ -205,7 +205,7 @@
                         color="grey lighten-1"
                         size="18"
                       >
-                        device_hub
+                        mdi-merge
                       </v-icon>
                     </v-list-item-avatar>
                     <v-list-item-title>
@@ -213,7 +213,7 @@
                     </v-list-item-title>
                     <v-list-item-icon>
                       <v-icon color="grey lighten-1">
-                        chevron_right
+                        mdi-chevron-right
                       </v-icon>
                     </v-list-item-icon>
                   </v-list-item>
@@ -245,7 +245,7 @@
                     :disabled="!prev"
                     @click="firstPage()"
                   >
-                    <v-icon>skip_previous</v-icon>
+                    <v-icon>mdi-skip-previous</v-icon>
                   </v-btn>
                   <v-btn
                     class="mx-1"
@@ -254,7 +254,7 @@
                     :disabled="!prev"
                     @click="turnPage(false)"
                   >
-                    <v-icon>chevron_left</v-icon>
+                    <v-icon>mdi-chevron-left</v-icon>
                   </v-btn>
                   <v-btn
                     class="mx-1"
@@ -263,7 +263,7 @@
                     :disabled="!next"
                     @click="turnPage(true)"
                   >
-                    <v-icon>chevron_right</v-icon>
+                    <v-icon>mdi-chevron-right</v-icon>
                   </v-btn>
                   <v-btn
                     class="mx-1"
@@ -272,7 +272,7 @@
                     :disabled="!next"
                     @click="lastPage()"
                   >
-                    <v-icon>skip_next</v-icon>
+                    <v-icon>mdi-skip-next</v-icon>
                   </v-btn>
                 </div>
               </v-toolbar>
@@ -375,7 +375,7 @@ export default defineComponent({
     const prev = computed(() => offset.value !== 0);
     const nodeColsClasses = computed(() => `d-flex flex-row node-cols${panelOpen.value ? '' : ' node-cols-closed'}`);
     const networkVisClasses = computed(() => `network-vis${panelOpen.value ? '' : ' network-vis-closed'}`);
-    const drawerIcon = computed(() => (panelOpen.value ? 'expand_more' : 'expand_less'));
+    const drawerIcon = computed(() => (panelOpen.value ? 'mdi-chevron-down' : 'mdi-chevron-up'));
 
     function toggle() {
       panelOpen.value = !panelOpen.value;
diff --git a/src/views/NodeDetail.vue b/src/views/NodeDetail.vue
index c6bfa62..f3576d1 100644
--- a/src/views/NodeDetail.vue
+++ b/src/views/NodeDetail.vue
@@ -10,7 +10,7 @@
             class="ml-4 mr-5"
             color="grey lighten-1"
           >
-            library_books
+            mdi-text-box-multiple
           </v-icon>
 
           <span class="breadcrumbs">
@@ -24,13 +24,13 @@
               class="mx-4"
               color="grey lighten-2"
             >
-              chevron_right
+              mdi-chevron-right
             </v-icon>
             <v-icon
               class="mr-3"
               color="grey lighten-1"
             >
-              timeline
+              mdi-chart-timeline-variant
             </v-icon>
             <router-link
               :to="{
@@ -44,7 +44,7 @@
               class="mx-4"
               color="grey lighten-2"
             >
-              chevron_right
+              mdi-chevron-right
             </v-icon>
             {{ type }}/{{ node }}
           </span>
@@ -129,14 +129,14 @@
                     :disabled="!prevIncoming"
                     @click="firstPage('incoming')"
                   >
-                    <v-icon>skip_previous</v-icon>
+                    <v-icon>mdi-skip-previous</v-icon>
                   </v-btn>
                   <v-btn
                     icon
                     :disabled="!prevIncoming"
                     @click="turnPage('incoming', false)"
                   >
-                    <v-icon>chevron_left</v-icon>
+                    <v-icon>mdi-chevron-left</v-icon>
                   </v-btn>
 
                   <span
@@ -151,14 +151,14 @@
                     :disabled="!nextIncoming"
                     @click="turnPage('incoming', true)"
                   >
-                    <v-icon>chevron_right</v-icon>
+                    <v-icon>mdi-chevron-right</v-icon>
                   </v-btn>
                   <v-btn
                     icon
                     :disabled="!nextIncoming"
                     @click="lastPage('incoming')"
                   >
-                    <v-icon>skip_next</v-icon>
+                    <v-icon>mdi-skip-next</v-icon>
                   </v-btn>
                 </div>
               </v-card-title>
@@ -194,14 +194,14 @@
                     :disabled="!prevOutgoing"
                     @click="firstPage('outgoing')"
                   >
-                    <v-icon>skip_previous</v-icon>
+                    <v-icon>mdi-skip-previous</v-icon>
                   </v-btn>
                   <v-btn
                     icon
                     :disabled="!prevOutgoing"
                     @click="turnPage('outgoing', false)"
                   >
-                    <v-icon>chevron_left</v-icon>
+                    <v-icon>mdi-chevron-left</v-icon>
                   </v-btn>
 
                   <span
@@ -216,14 +216,14 @@
                     :disabled="!nextOutgoing"
                     @click="turnPage('outgoing', true)"
                   >
-                    <v-icon>chevron_right</v-icon>
+                    <v-icon>mdi-chevron-right</v-icon>
                   </v-btn>
                   <v-btn
                     icon
                     :disabled="!nextOutgoing"
                     @click="lastPage('outgoing')"
                   >
-                    <v-icon>skip_next</v-icon>
+                    <v-icon>mdi-skip-next</v-icon>
                   </v-btn>
                 </div>
               </v-card-title>
diff --git a/src/views/TableDetail.vue b/src/views/TableDetail.vue
index 2f751b2..ea0ce9e 100644
--- a/src/views/TableDetail.vue
+++ b/src/views/TableDetail.vue
@@ -25,7 +25,7 @@
           >
             <v-list-item-avatar class="mr-3">
               <v-icon color="blue lighten-3">
-                exit_to_app
+                mdi-exit-to-app
               </v-icon>
             </v-list-item-avatar>
             <v-list-item-title>
@@ -33,7 +33,7 @@
             </v-list-item-title>
             <v-list-item-icon>
               <v-icon color="blue lighten-3">
-                chevron_right
+                mdi-chevron-right
               </v-icon>
             </v-list-item-icon>
           </v-list-item>
@@ -58,7 +58,7 @@
           >
             <v-list-item-action>
               <v-icon color="primary">
-                table_chart
+                mdi-table
               </v-icon>
             </v-list-item-action>
 
@@ -81,7 +81,7 @@
             class="ml-4 mr-5"
             color="grey lighten-1"
           >
-            library_books
+            mdi-text-box-multiple
           </v-icon>
 
           <span class="breadcrumbs">
@@ -96,11 +96,11 @@
             <v-icon
               class="mx-4"
               color="grey lighten-2"
-            >chevron_right</v-icon>
+            >mdi-chevron-right</v-icon>
             <v-icon
               class="mr-3"
               color="grey lighten-1"
-            >table_chart</v-icon>
+            >mdi-table</v-icon>
             {{ table }}
           </span>
         </v-toolbar-title>
diff --git a/src/views/WorkspaceDetail.vue b/src/views/WorkspaceDetail.vue
index c5ae345..916794d 100644
--- a/src/views/WorkspaceDetail.vue
+++ b/src/views/WorkspaceDetail.vue
@@ -12,7 +12,7 @@
               class="ml-4 mr-5"
               color="grey lighten-1"
             >
-              library_books
+              mdi-text-box-multiple
             </v-icon>
 
             <v-tooltip
@@ -31,7 +31,7 @@
                       color="grey darken-3"
                       size="20px"
                     >
-                      edit
+                      mdi-pencil
                     </v-icon>
                   </v-btn>
                 </div>
@@ -49,7 +49,7 @@
                 size="20px"
                 @click="cancelRename"
               >
-                close
+                mdi-close
               </v-icon>
             </v-btn>
 
diff --git a/src/vuetify.ts b/src/vuetify.ts
index ec41343..04affa7 100644
--- a/src/vuetify.ts
+++ b/src/vuetify.ts
@@ -3,8 +3,4 @@ import Vuetify from 'vuetify/lib';
 
 Vue.use(Vuetify);
 
-export default new Vuetify({
-  icons: {
-    iconfont: 'md',
-  },
-});
+export default new Vuetify();
diff --git a/yarn.lock b/yarn.lock
index 69253b2..3e3ecb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5824,11 +5824,6 @@ matcher@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.4"
 
-material-design-icons-iconfont@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-5.0.1.tgz#371875ed7fe9c8c520bc7123c3231feeab731c31"
-  integrity sha512-Xg6rIdGrfySTqiTZ6d+nQbcFepS6R4uKbJP0oAqyeZXJY/bX6mZDnOmmUJusqLXfhIwirs0c++a6JpqVa8RFvA==
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"