Vuetify数据表格分页图标不显示问题求助

问题描述 #

• 首次使用Vuetify框架，v-data-table组件的分页按钮可正常点击，但图标完全不显示
• 已尝试相关旧解决方案但无效
• 已安装@mdi/font包（版本7.4.47）

组件模板代码 #

<template>
  <v-data-table :items="homeCharacters" :headers="headers" class="charactersTable">
    <template v-slot:item="row">
      <tr class="characterRow">
        <td>{{ row.item.name }}</td>
        <td>{{ row.item.height }}</td>
        <td>{{ row.item.gender }}</td>
        <td>
          <v-btn @click="onButtonClick(row.item.id)"> View </v-btn>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

main.ts代码 #

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import { createPinia } from 'pinia'

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

const app = createApp(App)

const pinia = createPinia()

app.use(router)

app.use(pinia)

app.use(vuetify)

app.mount('#app')

问题原因 #

核心问题是Material Design Icons的字体文件未被正确引入。虽然你在Vuetify配置中指定了mdi图标集，但字体文件没有加载到项目中，导致图标无法渲染（按钮结构存在，但图标字符无法显示）。

解决方案 #

1. 引入@mdi/font字体文件 #

在main.ts的开头添加字体文件的引入语句：

import '@mdi/font/css/materialdesignicons.css'

修改后的main.ts开头示例：

import './assets/main.css'
import '@mdi/font/css/materialdesignicons.css' // 添加这一行

import { createApp } from 'vue'
// ... 其余代码不变

2. 排查样式冲突 #

如果添加字体引入后仍不显示，检查以下内容：

• 浏览器控制台是否有404错误，确认字体文件路径是否正确加载
• 全局CSS是否覆盖了.mdi类的样式，比如设置display: none、color: transparent或篡改font-family
• 临时移除自定义的item插槽，测试分页图标是否正常显示，排除模板自定义导致的意外影响

3. 确认Vuetify配置正确性 #

你的Vuetify图标配置是正确的，无需修改：

icons: {
  defaultSet: 'mdi',
  aliases,
  sets: {
    mdi,
  },
}

内容的提问来源于stack exchange，提问作者FlowRan