Vuetify图标显示异常求助：页面跳转后图标变为O形符号

问题描述 #

页面通过URL跳转后返回上一页时，下拉选择框、按钮等带图标的组件内图标会变成怪异的类O符号。尝试更换Vuetify版本至3.4.0、@mdi/font版本至7.1.96后，问题仍未解决。

显示对比 #

• 正常状态：
• 异常状态：
• 下拉框异常：
• 按钮异常：

当前Vuetify配置 #

/**
 * plugins/vuetify.ts
 *
 * Framework documentation: https://vuetifyjs.com
 */

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          error: '#F90808',
          info: '#339ef3',
          primary: '#1867C0',
          secondary: '#5CBBF6',
          success: '#4ae531'
        },
      },
    },
  },
})

修复方案尝试 #

1. 强制刷新MDI字体样式 #

这类异常多因页面导航后字体文件未正确加载或缓存冲突导致。可通过路由后置守卫强制重新注入字体样式：

// 路由配置文件（如router/index.ts）中添加全局后置钩子
router.afterEach(() => {
  const mdiLink = document.createElement('link');
  mdiLink.rel = 'stylesheet';
  mdiLink.href = '@mdi/font/css/materialdesignicons.css';
  mdiLink.onload = () => {
    const oldLink = document.querySelector('link[href*="materialdesignicons.css"]');
    oldLink?.remove();
  };
  document.head.appendChild(mdiLink);
});

2. 规避浏览器字体缓存 #

在MDI样式引入路径后添加随机参数，避免浏览器复用过期缓存：

// 修改plugins/vuetify.ts中的样式导入
const cacheBust = Date.now();
import(`@mdi/font/css/materialdesignicons.css?v=${cacheBust}`);
import 'vuetify/styles';

3. 排查PWA缓存策略（若使用PWA） #

如果项目启用PWA，检查Service Worker的缓存规则，确保MDI字体文件未被错误缓存。可通过Workbox配置设置合理的缓存过期时间：

// Workbox缓存配置示例
workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxAgeSeconds: 86400, // 1天过期
      }),
    ],
  })
);

4. 切换为SVG图标替代字体图标 #

若字体图标问题无法根治，可改用SVG格式的MDI图标：

1. 安装依赖：

npm install @mdi/js

2. 更新Vuetify配置：

// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  // 原有主题配置...
})

3. 组件中使用示例：

<template>
  <v-btn icon>
    <v-icon>{{ mdiMenu }}</v-icon>
  </v-btn>
</template>

<script setup>
import { mdiMenu } from '@mdi/js'
</script>

5. 调整字体渲染CSS #

部分浏览器的硬件加速可能干扰字体渲染，可在全局CSS中添加以下样式优化：

/* 全局样式文件中添加 */
.v-icon {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者Mukhammad-Umar