如何通过CDN在Vue+Vuetify项目中导入MDI字体？

你当前的代码已经正确配置了Vuetify的图标类型为mdi，但缺少MDI字体的CSS资源引入，这是导致图标不显示的核心原因。按以下步骤修正：

1. 在HTML中引入MDI字体的CDN CSS文件 #

在<head>标签内添加MDI字体的样式文件，确保放在Vuetify的CDN之后：

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">

可根据需求替换版本号（比如7.x换成最新稳定版），建议使用与Vuetify兼容的版本。

2. 确认Vuetify的图标配置正确 #

你的Vuetify配置已经符合要求，无需修改：

const vuetify = createVuetify({
  icons: {
    iconfont: 'mdi', // 保持这个配置即可
  }
})

完整的HTML示例 #

整合所有资源引入和代码的完整结构如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue + Vuetify MDI Icons</title>
  <!-- 引入Vue CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Vuetify CDN -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.js"></script>
  <!-- 引入MDI字体CSS -->
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <v-btn icon="mdi-dots-vertical"></v-btn>
    <v-icon>mdi-home</v-icon>
    <p>{- message -}</p>
  </div>

  <script>
    const { createApp } = Vue
    const { createVuetify } = Vuetify

    const vuetify = createVuetify({
      icons: {
        iconfont: 'mdi',
      }
    })

    createApp({
      delimiters: ['{-', '-}'],
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).use(vuetify).mount('#app')
  </script>
</body>
</html>

注意事项 #

• 确保所有CDN资源能正常访问，若某个链接失效可替换为对应资源的最新CDN地址
• 使用图标时保持mdi-前缀的格式正确，比如mdi-home、mdi-dots-vertical
• Vuetify 3.x对应MDI字体的版本建议使用6.x或7.x，避免版本不兼容问题

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