vuetify2.0中icon显示问题

项目中需要用到文件上传功能，经查vuetify1.5中没有此功能，vuetify2.0中才有此组件。

• 于是在使用vue/cli3搭建的demo中安装vuetify2.0：npm install --save vuetify

• main.js中引入并使用vuetify，组件中使用v-file-input标签：

  //main.js
  // 引入vuetify
  import Vuetify from 'vuetify'
  //使用vuetify
  Vue.use(Vuetify)
  

  //组件中
  <v-file-input accept=".xlsx" label="上传excel文件"></v-file-input>
  

  • 但此时页面中效果：

  

• 然后安装并引入material-design-icons-iconfont：npm install material-design-icons-iconfont -D和@mdi/font：npm install @mdi/font -D

  //main.js
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  import 'vuetify/dist/vuetify.min.css'
  import '@mdi/font/css/materialdesignicons.css'
  

  • 此时页面效果：

  

• 还是icon显示问题，必须使用v-app包裹组件：

  //App.vue
  <template>
      <v-app>
          <excel></excel>
      </v-app>
  </template>
  

  • 此时会报错Error: Vuetify is not properly initialized，需要再在main.js中加export default new Vuetify({ })和vuetify: new Vuetify()，此时的main.js：

  import Vue from 'vue'
  import App from './App.vue'
  // 引入vuetify
  import Vuetify from 'vuetify'
  //使用vuetify
  Vue.use(Vuetify)
  Vue.config.productionTip = false
  
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  import 'vuetify/dist/vuetify.min.css'
  import '@mdi/font/css/materialdesignicons.css'
  export default new Vuetify({ })
  new Vue({
  render: h => h(App),
    vuetify: new Vuetify(),
  }).$mount('#app')
  

  • 最终icon正确显示：