无法在Quasar中使用图标

Question

我正在尝试将一些图标与

q-btn

一起使用，但无济于事。

我正在尝试在我的测试项目中使用

mdi-v7

图标。要安装图标，我遵循了官方文档。在我的

./quasar.config.js

中，我添加了以下内容

extras: [
  "mdi-v7",
  "roboto-font", // optional, you are not bound to it
  "material-icons", // optional, you are not bound to it
],
framework: {
  config: {},
  iconSet: "mdi-v7",
  plugins: [],
},

在我的 vue 元素中没有，我尝试使用如下图标

<div class="q-ml-sm row no-wrap items-center">
    <q-btn
      type="a"
      flat
      round
      :icon="mdiDeskLamp"
      @click="$q.dark.toggle()"/>
</div>

我也导入了图标

import { mdiDeskLamp } from "@quasar/extras/mdi-v7";

但这在控制台中给我警告并且没有显示图标。

[Vue warn]: Property "mdiDeskLamp" was accessed during render but is not defined on instance. 

此外，如果我使用

icon="mdiDeskLamp

（而不是

:icon

），我不会显示任何图标，但是会显示一个奇怪的D

我很确定这是新手犯的错误，因为它对框架很陌生。任何帮助将不胜感激。

谢谢