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

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

Quasar当前支持: Material Icons、 Material Symbols、 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.config.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@v2/dist/icon-set/fontawesome-v6.umd.prod.js"></script>
<script>
  Quasar.iconSet.set(Quasar.iconSet.fontawesomeV6)
</script>

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

Quasar Vite插件方式

我们编辑你的main.js:

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

Vue CLI方式

编辑main.js:

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

动态的（non-SSR）

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

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

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

  try {
    iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
      Quasar.iconSet.set(setDefinition.default)
    })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

// -- With @quasar/app-webpack --

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.config.js中：

boot: [
  'quasar-icon-set'
]

动态的 (SSR)

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

// -- With @quasar/app-vite --

import { Quasar } from 'quasar'

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob('../../node_modules/quasar/icon-set/*.mjs')
// or just a select few (example below with only DE and FR):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v6|fontawesome-v6).mjs')

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

  try {
    iconSetList[ `../../node_modules/quasar/icon-set/${ iconSetName }.mjs` ]().then(lang => {
      Quasar.iconSet.set(setDefinition.default, ssrContext)
    })
  }
  catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
}

// -- With @quasar/app-webpack --

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 => {
      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对象，所有组件都将正确更新。 这是一个例子：

// Composition API variant
import { useQuasar } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v6.js'

setup () {
  const $q = useQuasar()

  function changeIconSetToMdiIconSet () {
    $q.iconSet.set(mdiIconSet)
  }

  return {
    changeIconSetToMdiIconSet
  }
}

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

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

动态更改特定图标

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

// Composition API variant
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  function changeQEditorHeaderIcon () {
    $q.iconSet.editor.header1 = 'fas fa-font'
  }

  return { changeQEditorHeaderIcon }
}

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