<v-icon> vuetify material Icon (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

这对我有用：

首先将以下内容添加到 nuxt.config.js 中的 vuetify: {} 对象：

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

然后参考你的图标没有'mdi-'前缀如下：

<v-icon>feedback</v-icon>

请注意，我只有 2 小时的 Nuxt.js 经验，因此可能有更好的方法，但我希望这可以帮助人们入门 :)

---

编辑：我发现 Vuetify 可以附带两个不同的图标库（取决于您遵循的安装说明）。一个是md，您使用没有为您的图标添加前缀，另一个是mdi，您使用带有“mdi-”前缀。

Answer 2

非官方的 google 存储库确实有效，不能为他人作证。先试试CDN链接

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

或者，使用 yarn 或 NPM 在本地安装

$ yarn add material-design-icons-iconfont -D

// 或

$ npm install material-design-icons-iconfont -D

然后导入你的 vuetify.js 文件

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})

就是这样