Migrated from Google material design icons to vuetify default MDI

app/imports/ui/components/ColorPicker.vue

@@ -10,7 +10,7 @@
         icon
         v-on="on"
       >
-        <v-icon>format_paint</v-icon>
+        <v-icon>mdi-format-paint</v-icon>
       </v-btn>
     </template>
     <v-card class="overflow-hidden">
@@ -30,7 +30,7 @@
                 v-if="kebabColor === colorOption"
                 :class="{dark: isDark(colorOption, shade)}"
               >
-                check
+                mdi-check
               </v-icon>
             </v-scroll-y-transition>
           </div>
@@ -58,7 +58,7 @@
                   v-if="kebabShade === shadeOption"
                   :class="isDark(color, shade) ? 'dark' : 'light'"
                 >
-                  check
+                  mdi-check
                 </v-icon>
               </v-scroll-y-transition>
             </div>

app/imports/ui/components/IncrementButton.vue

@@ -14,7 +14,7 @@
         @click.stop
       >
         <slot>
-          <v-icon>add</v-icon>
+          <v-icon>mdi-plus</v-icon>
         </slot>
       </v-btn>
     </template>

app/imports/ui/components/IncrementMenu.vue

@@ -15,14 +15,14 @@
         class="filled"
         @click="toggleAdd(); $nextTick(() => $refs.editInput.focus())"
       >
-        <v-icon>add</v-icon>
+        <v-icon>mdi-plus</v-icon>
       </v-btn>
       <v-btn
         :disabled="context.editPermission === false"
         class="filled"
         @click="toggleSubtract(); $nextTick(() => $refs.editInput.focus())"
       >
-        <v-icon>remove</v-icon>
+        <v-icon>mdi-minus</v-icon>
       </v-btn>
     </v-btn-toggle>
     <v-text-field
@@ -48,7 +48,7 @@
       class="mx-2 filled"
       @click="commitEdit"
     >
-      <v-icon>done</v-icon>
+      <v-icon>mdi-check</v-icon>
     </v-btn>
     <v-btn
       :small="!flat"
@@ -58,7 +58,7 @@
       class="filled"
       @click="cancelEdit"
     >
-      <v-icon>close</v-icon>
+      <v-icon>mdi-close</v-icon>
     </v-btn>
     <v-spacer />
   </v-layout>
@@ -117,11 +117,11 @@
 			operationIcon(operation) {
 				switch (operation) {
 					case 'set':
-						return 'forward';
+						return 'mdi-forward';
 					case 'add':
-            return 'add';
+            return 'mdi-plus';
 					case 'subtract':
-						return 'remove';
+						return 'mdi-minus';
 				}
 			},
 			toggleAdd(){

app/imports/ui/components/global/DatePicker.vue

@@ -11,7 +11,7 @@
       <v-text-field
         :value="formattedSafeValue"
         v-bind="$attrs"
-        prepend-icon="event"
+        prepend-icon="mdi-calendar"
         readonly
         :loading="loading"
         :error-messages="errors"

app/imports/ui/components/global/IconPicker.vue

@@ -24,29 +24,29 @@
             v-else
             large
           >
-            highlight_alt
+            mdi-select-search
           </v-icon>
         </v-btn>
       </div>
     </template>
     <v-card>
       <v-card-text>
-        <div class="layout">
+        <div class="layout row align-center">
           <text-field
             ref="iconSearchField"
             label="Search icons"
-            append-icon="search"
+            append-icon="mdi-search"
             clearable
+            hide-details
+            class="ma-2"
             :value="searchString"
             @change="search"
           />
           <v-btn
-            icon
+            text
             @click="select()"
           >
-            <v-icon>
-              cancel
-            </v-icon>
+            clear
           </v-btn>
         </div>
         <v-layout

app/imports/ui/components/propertyToolbar.vue

@@ -10,7 +10,7 @@
       icon
       @click="back"
     >
-      <v-icon>arrow_back</v-icon>
+      <v-icon>mdi-arrow-left</v-icon>
     </v-btn>
     <property-icon
       :model="model"
@@ -50,7 +50,7 @@
               data-id="property-toolbar-menu-button"
               v-on="on"
             >
-              <v-icon>more_vert</v-icon>
+              <v-icon>mdi-dots-vertical</v-icon>
             </v-btn>
           </template>
           <v-list>
@@ -64,7 +64,7 @@
                 </v-list-item-title>
               </v-list-item-content>
               <v-list-item-action>
-                <v-icon>file_copy</v-icon>
+                <v-icon>mdi-content-copy</v-icon>
               </v-list-item-action>
             </v-list-item>
             <v-list-item
@@ -77,7 +77,7 @@
                 </v-list-item-title>
               </v-list-item-content>
               <v-list-item-action>
-                <v-icon>send</v-icon>
+                <v-icon>mdi-send</v-icon>
               </v-list-item-action>
             </v-list-item>
             <v-list-item
@@ -90,7 +90,7 @@
                 </v-list-item-title>
               </v-list-item-content>
               <v-list-item-action>
-                <v-icon>delete</v-icon>
+                <v-icon>mdi-delete</v-icon>
               </v-list-item-action>
             </v-list-item>
           </v-list>
@@ -112,13 +112,13 @@
           v-if="editing"
           key="doneIcon"
         >
-          done
+          mdi-check
         </v-icon>
         <v-icon
           v-else
           key="createIcon"
         >
-          create
+          mdi-pencil
         </v-icon>
       </v-slide-y-transition>
     </v-btn>

app/imports/ui/components/snackbars/SnackbarQueue.vue

@@ -32,7 +32,7 @@
         v-bind="attrs"
         @click="closeSnackbar"
       >
-        <v-icon>close</v-icon>
+        <v-icon>mdi-close</v-icon>
       </v-btn>
     </template>
   </v-snackbar>

app/imports/ui/components/tree/TreeNode.vue

@@ -18,7 +18,7 @@
         @click.stop="expanded = !expanded"
       >
         <v-icon v-if="canExpand && (hasChildren || organize)">
-          chevron_right
+          mdi-chevron-right
         </v-icon>
       </v-btn>
       <div
@@ -31,7 +31,7 @@
           :class="selected && 'primary--text'"
           :disabled="expanded"
         >
-          drag_handle
+          mdi-drag
         </v-icon>
         <!--{{node && node.order}}-->
         <tree-node-view