Quasar组件有自己的图标。 Quasar并不强迫您特别使用一个图标库（以便它们可以正确显示），而允许您选择应该用于其组件的图标。 这被称为“Quasar图标集”。

您可以安装多个图标库，但必须只选择一个用于Quasar组件的图标库。

Quasar当前支持: Material Icons、 Font Awesome、 Ionicons、 MDI、 Eva Icons、Themify Icons、 Line Awesome和Bootstrap Icons.。

也可以将自己的图标（作为自定义svg或任何格式的图像）与任何Quasar组件一起使用，有关更多信息，请参见QIcon页面。

配置默认图标集

Quasar图标集有两种类型：基于webfont和基于svg。

除非另有配置，否则Quasar使用Material Icons webfont作为其组件的图标集。 但是，您可以告诉Quasar使用其他图标集，但是如果它是基于Webfont的图标集，请确保将其图标库包含在您的网站/应用中（请参阅安装图标库）。

硬编码

如果未动态确定默认的Quasar图标集（例如，不依赖于Cookie），则可以：

Quasar CLI方式

再次编辑/quasar.conf.js:

framework: {
  //基于webfont的示例
  iconSet: 'mdi-v6'
}

framework: {
  //基于svg的示例
  iconSet: 'svg-mdi-v6'
}

有关所有可用选项，请访问GitHub 存储库。

包含MDI和Fontawesome并告诉Quasar使用Fontawesome作为其组件的完整示例。

extras: [
  'mdi-v6',
  'fontawesome-v6'
],
framework: {
  iconSet: 'fontawesome-v6'
}

这将使您能够在您的应用程序中同时使用MDI和Fontawesome webfonts，并且所有Quasar组件都将显示Fontawesome图标。

UMD方式

包含你的Quasar版本的Quasar图标集标签，并告诉Quasar使用它。 例：

<!-- include this after Quasar JS tag -->
<script src="https://cdn.jsdelivr.net/npm/quasar@1/dist/icon-set/fontawesome-v6.umd.prod.js"></script>
<script>
  Quasar.iconSet.set(Quasar.iconSet.fontawesomeV6)
</script>

在UMD/Standalone页面上检查需要在HTML文件中包含哪些标签。

Vue CLI方式

编辑main.js:

import iconSet from 'quasar/icon-set/fontawesome-v6'
// ...
import { Quasar } from 'quasar'
// ...
Vue.use(Quasar, {
  // ...,
  iconSet: iconSet
})

动态的（non-SSR）

Quasar CLI：如果必须动态选择所需的Quasar图标集（例如：取决于cookie），则需要创建一个启动文件：$ quasar new boot quasar-icon-set [--format ts]。 这将创建/src/boot/quasar-icon-set.js文件。 编辑它为：

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

export default async () => {
  const iconSetName = 'mdi-v6' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(mdi-v6|fontawesome-v6)\.js$/ */
      'quasar/icon-set/' + iconSetName
      )
      .then(setDefinition => {
        Quasar.iconSet.set(setDefinition.default)
      })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

然后将此启动文件注册到/quasar.conf.js中：

boot: [
  'quasar-icon-set'
]

动态的（SSR）

v1.11+

在处理SSR时，我们不能使用单例对象，因为这会污染会话。 结果，与上面的动态示例相反（首先阅读它！），您还必须从启动文件中指定ssrContext：

// for when you don't specify quasar.conf.js > framework: 'all'
import { Quasar } from 'quasar'
// OTHERWISE:
import Quasar from 'quasar'

// ! NOTICE ssrContext param:
export default async ({ ssrContext }) => {
  const iconSetName = 'mdi-v6' // ... some logic to determine it (use Cookies Plugin?)

  try {
    await import(
      /* webpackInclude: /(mdi-v6|fontawesome-v6)\.js$/ */
      'quasar/icon-set/' + iconSetName
      )
      .then(setDefinition => {
        // ! NOTICE ssrContext param:
        Quasar.iconSet.set(setDefinition.default, ssrContext)
      })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

在运行时更改Quasar图标集

动态更改图标集

Quasar图标集是响应式的，因此如果更改$ q.iconSet对象，所有组件都将正确更新。 这是一个例子：

import mdiIconSet from 'quasar/icon-set/mdi-v6.js'

methods: {
  changeIconSetToMdiIconSet () {
    this.$q.iconSet.set(mdiIconSet)
  }
}

动态更改特定图标

如果要将特定图标更改为另一个图标，可以的。 这是一个例子：

methods: {
  changeQEditorHeaderIcon () {
    this.$q.iconSet.editor.header1 = 'fas fa-font'
  }
}
``