vue.js - <v-icon> vuetify Material 图标 (mdi) 在 vuetify 和 nuxt 应用中显示问题？

Question

我正在使用 nuxt 和 vuetify。所有的标签工作正常。但是当我使用 <v-icon> , 图标没有显示..

<v-flex xs12 mb-3>
  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-facebook</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
      <v-icon color="grey darken-4">mdi-google-plus</v-icon>
  </v-btn>

  <v-btn outline fab small color="blue-grey lighten-4">
     <v-icon color="grey darken-4">mdi-linkedin</v-icon>
  </v-btn>
</v-flex>

Answer 1

这是对我有用的:
首先将以下内容添加到 vuetify: {} nuxt.config.js 中的对象:

defaultAssets: {
  font: true,
  icons: 'md'
},
icons: {
  iconfont: 'md',
}

然后引用你的图标没有 'mdi-' 前缀如下:<v-icon>feedback</v-icon>

Please note that I only have 2 hours of Nuxt.js experience so there is likely a better way, but I hope this helps people get started :)

Edit: I figured out that there are two different icon libraries that Vuetify can come with (depending on which instructions you follow for installation). One is md which you use without prefixing your icons and the other is mdi which you use with the "mdi-" prefix.