Vuetify using local resources icon

@vue/cli 4.2.3Scaffolding created Vuetifyproject is used by default on the foreign CDN Robotoand Material Design Iconsresources, very slow or even fail to load, below the record about how these two instead of using local resources

modify/public/index.html

Delete the following two lines of reference

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

Installation respective packets

yarn add @mdi/font -D
# roboto字体其实不要也行,就英文的一套字体而已
yarn add typeface-roboto -D

modifyplugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import zhHans from 'vuetify/es5/locale/zh-Hans'   // 引入中文语言包
import 'typeface-roboto/index.css'    // 引入本地的Roboto字体资源
import '@mdi/font/css/materialdesignicons.css'  // 引入本地的Material Design Icons资源

Vue.use(Vuetify);

export default new Vuetify({
  lang:{
    locales: {zhHans},
    current: 'zhHans'
  },
  icons:{
    iconfont: 'mdi',	// 设置使用本地的icon资源
  }
});

Used in the template

<template>
  <div class="home">
    <v-icon>mdi-account-circle</v-icon>
  </div>
</template>

<script>

export default {
}
</script>

related resources

Complete mdithe icon corresponding to the code can be viewed at the official website, the code is mdi-xxxin the format:

https://cdn.materialdesignicons.com/4.9.95/

Template should be called in this way

<v-icon>mdi-account</v-icon>

More examples

By modifying <v-icon>you can modify the icon size, color tag attributes

<template>
  <div class="home">
    <v-icon>mdi-account</v-icon>
    <v-icon large>mdi-account</v-icon>
    <v-icon x-large>mdi-account</v-icon>
    <v-icon size="120px">mdi-account</v-icon>
    <v-icon size="120px" color="#4fbf8d">mdi-account</v-icon>
  </div>
</template>

<script>

export default {
}
</script>