<v-icon> vuetify material Icon (mdi) 在 vuetify 和 nuxt 应用程序中显示问题？

Posted 2023-02-22

【中文标题】<v-icon> vuetify material Icon (mdi) 在 vuetify 和 nuxt 应用程序中显示问题？

【英文标题】：<v-icon> vuetify material Icon (mdi) showing problem in vuetify and nuxt app?

【发布时间】：2019-10-24 12:09:59

【问题描述】：

我正在使用 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>

【问题讨论】：

Material Design 图标和字体安装和配置了吗？

是的，我有.. vuetifyjs.com/en/framework/icons

【参考方案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-”前缀。

【讨论】：

很高兴听到@Photonic :)

@AmanuelNega 我已经在底部的编辑中做了（我也链接到他们两个）

【参考方案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',
  ,
)

就是这样

【讨论】：

对我来说，使用cdn 不工作...但如果使用npm，它工作