Use @mdi/fonts instead of material-design font to avoid flashing the icon text if loading of the font is too long

package.json

@@ -16,9 +16,9 @@
     },
     "dependencies": {
         "@babel/polyfill": "^7.0.0",
+        "@mdi/font": "^3.0.39",
         "file-saver": "^1.3.8",
         "gps-to-gpx": "git://github.com/phyks/gps-to-gpx.git#1cb5adf4dd382266d076d7df3cb5aa3a4d7dd27b",
-        "material-icons": "^0.2.3",
         "nosleep.js": "^0.7.0",
         "ol": "^5.3.0",
         "roboto-fontface": "^0.9.0",

src/App.vue

@@ -21,7 +21,7 @@
                 >
                 <v-badge color="orange" left>
                     <span slot="badge">{{ unsentReportsLength }}</span>
-                    <v-icon>cloud_upload</v-icon>
+                    <v-icon>mdi-cloud-upload</v-icon>
                 </v-badge>
             </v-btn>
             <v-menu
@@ -30,7 +30,7 @@
                 v-if="showMenu"
                 >
                 <v-btn slot="activator" icon role="button" :aria-label="$t('buttons.menu')">
-                    <v-icon>more_vert</v-icon>
+                    <v-icon>mdi-dots-vertical</v-icon>
                 </v-btn>
                 <v-list>
                     <v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded">
@@ -54,7 +54,7 @@
                 </v-list>
             </v-menu>
             <v-btn icon role="button" :aria-label="$t('buttons.back')" v-else @click="goBack">
-                <v-icon>arrow_back</v-icon>
+                <v-icon>mdi-arrow-left</v-icon>
             </v-btn>
             <div>
                 <v-progress-linear

src/components/Map.vue

@@ -21,7 +21,7 @@
             role="button"
             :aria-label="$t('buttons.recenterMap')"
             >
-            <v-icon>my_location</v-icon>
+            <v-icon>mdi-crosshairs-gps</v-icon>
         </v-btn>
     </v-layout>
 </template>

src/components/PermissionsSwitches.vue

@@ -88,13 +88,13 @@ export default {
     data() {
         return {
             geolocationPermissionMessages: [
-                `<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.geolocationDescription')}`,
+                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.geolocationDescription')}`,
             ],
             permanentNotificationMessages: [
-                `<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.permanentNotificationDescription')}`,
+                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.permanentNotificationDescription')}`,
             ],
             preventSuspendMessages: [
-                `<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.preventSuspendDescription')}`,
+                `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.preventSuspendDescription')}`,
             ],
         };
     },

src/components/ReportCard.vue

@@ -27,7 +27,7 @@
                         class="smallButton"
                         @click.stop="upvote"
                         >
-                        <v-icon>thumb_up</v-icon>
+                        <v-icon>mdi-thumb-up</v-icon>
                     </v-btn>
                 </v-flex>
 
@@ -42,7 +42,7 @@
                         class="mediumButton"
                         @click.stop="downvote"
                         >
-                        <v-icon>thumb_down</v-icon>
+                        <v-icon>mdi-thumb-down</v-icon>
                     </v-btn>
                 </v-flex>
 
@@ -59,7 +59,7 @@
                     role="button"
                     :aria-label="$t('buttons.close')"
                     >
-                    <v-icon>close</v-icon>
+                    <v-icon>mdi-close</v-icon>
                 </v-btn>
             </v-layout>
         </v-container>

src/components/ReportIssueModal.vue

@@ -27,7 +27,7 @@
                     large
                     role="button"
                     >
-                    {{ $t('reportIssueModal.send') }} <v-icon class="ml-1">email</v-icon>
+                    {{ $t('reportIssueModal.send') }} <v-icon class="ml-1">mdi-email</v-icon>
                 </v-btn>
 
                 <v-spacer></v-spacer>

src/css/vendor/material-icons.css

@@ -1,35 +0,0 @@
-/**
- * Copy of the CSS file from the node_modules package, including an additional
- * font-display directive.
- */
-@font-face {
-    font-display: block;
-    font-family: "Material Icons";
-    font-style: normal;
-    font-weight: 400;
-    src: url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.eot");
-    /* For IE6-8 */
-    src: local("Material Icons"), local("MaterialIcons-Regular"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype");
-}
-
-.material-icons {
-    font-family: "Material Icons";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizeLegibility;
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-    /* Support for IE. */
-    font-feature-settings: 'liga';
-}

src/main.js

@@ -5,7 +5,7 @@ import '@/polyfills';
 import Vue from 'vue';
 
 import '@/css/vendor/roboto-fontface.css';
-import '@/css/vendor/material-icons.css';
+import '@mdi/font/css/materialdesignicons.css';
 import 'ol/ol.css';
 import 'vuetify/src/stylus/app.styl';
 

src/views/Map.vue

@@ -39,7 +39,7 @@
                     :aria-label="$t('buttons.reportProblem')"
                     v-if="!hasCenterProvidedByRoute && hasGeolocationTracking"
                     >
-                    <v-icon>report_problem</v-icon>
+                    <v-icon>mdi-alert</v-icon>
                 </v-btn>
                 <ReportDialog
                     v-model="isReportDialogVisible"

src/views/Onboarding.vue

@@ -16,7 +16,7 @@
 
                 <p class="text-xs-center">
                     <i18n path="intro.reportIconDescription">
-                        <v-icon>report_problem</v-icon>
+                        <v-icon>mdi-alert</v-icon>
                     </i18n>
                 </p>
 

src/vuetify.js

@@ -44,4 +44,5 @@ Vue.use(Vuetify, {
         VTextField,
         VToolbar,
     },
+    iconfont: 'mdi',
 });

yarn.lock

@@ -676,6 +676,11 @@
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
 
+"@mdi/font@^3.0.39":
+  version "3.0.39"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-3.0.39.tgz#8a388ec9816939eff2099120102073aecdf6e5f8"
+  integrity sha512-VnPxEXsiV+YP9NO7XyQEvs1tBxkmtPzib9dRq/1CqubaZy9oeP7Jmgd/IEya8Z3bVyj+NZpwS0YGZW1kvx2eFQ==
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -5721,10 +5726,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-material-icons@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-0.2.3.tgz#1f84d50effbb700287ba44a21bbce0339252ccaf"
-
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"