<v-icon> vuetify 材质图标 (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>

请注意，我只有 2 小时的 Nuxt.js 经验，所以可能有更好的方法，但我希望这有助于人们开始:)

编辑：我发现 Vuetify 可以附带两个不同的图标库（取决于您遵循的安装说明）。一个是医学博士，你用不用前缀你的图标，另一个是MDI您使用与该“MDI-”前缀。

Answer 2

非官方的谷歌存储库肯定有效，不能为他人作证。先试试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 文件

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

就这样