Quasar框架中mdi-v7图标无法使用问题求助

先确认基础配置是否正确 #

首先检查你的quasar.config.js配置是否完全符合要求：

// quasar.config.js
module.exports = function (/* ctx */) {
  return {
    // ...其他配置
    extras: [
      'mdi-v7' // 确保已添加mdi-v7资源
    ],
    framework: {
      iconSet: 'mdi-v7', // 指定默认图标集为mdi-v7
      // ...其他framework配置
    }
    // ...其他配置
  }
}

修改配置后必须重启开发服务器，否则配置不会生效。

场景1：使用:icon绑定导入的图标时出现未定义警告 #

你遇到的[Vue warn]: Property "mdiDeskLamp" was accessed during render but is not defined on instance警告，是因为导入的图标没有被模板正确访问到，解决方式分两种组件写法：

选项式API（Options API） #

需要把导入的图标添加到组件的data中，让模板能访问到：

<template>
  <q-btn :icon="mdiDeskLamp" />
</template>

<script>
// 从mdi-v7包中导入对应图标
import { mdiDeskLamp } from '@quasar/extras/mdi-v7'

export default {
  data() {
    return {
      mdiDeskLamp // 将图标挂载到实例上
    }
  }
}
</script>

组合式API（<script setup>） #

在<script setup>中导入的变量可直接在模板使用，无需额外配置：

<template>
  <q-btn :icon="mdiDeskLamp" />
</template>

<script setup>
import { mdiDeskLamp } from '@quasar/extras/mdi-v7'
</script>

场景2：使用icon="mdiDeskLamp"显示奇怪字符 #

出现占位字符是因为你用了驼峰式的图标名称，Quasar要求字符串形式的图标名称必须是**kebab-case（短横线分隔小写）**格式。

mdiDeskLamp对应的正确字符串名称是mdi-desk-lamp，修改后即可正常显示：

<template>
  <q-btn icon="mdi-desk-lamp" />
</template>

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