Quasar 组件有自己的图标。Quasar 不会强迫你使用某个图标库（以便它们能够正确显示），而是让你选择应该为其组件使用哪些图标。这被称为 Quasar Icon Set。

¥Quasar components have their own icons. Rather than forcing you into using one icon library in particular (so that they can display correctly), Quasar lets you choose which icons it should use for its components. This is called a Quasar Icon Set.

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

¥You can install multiple icon libraries, but you must choose only one to use on Quasar’s components.

Quasar 目前支持：Material 图标、Material 符号、Font Awesome、Ionicons、MDI、Eva 图标、Themify 图标、Line Awesome 和 Bootstrap 图标。

¥Quasar currently supports: Material Icons, Material Symbols, Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome and Bootstrap Icons.

你也可以将自己的图标文件（SVG 或任何图片格式）与任何 Quasar 组件一起使用，更多详情请参阅 QIcon |图片图标 页面。

¥It is also possible to use your own icon files (SVG or any image format) with any Quasar component, see QIcon | Image icons page for more details.

你还可以提供图标映射功能，以添加对任何其他图标库的支持，或根据你的喜好重新映射一些现有图标库，更多详情请参阅 QIcon | 自定义映射。例如，如果使用图片图标，你可以使用它们将长图片文件路径重新映射到简短易懂的名称。

¥You can also provide an icon mapping function to add support for any other icon library or re-map some existing ones to your liking, see QIcon | Custom mapping for more details. You can use this to re-map long image file paths to short and understandable names, if using image icons, for example.

配置默认图标集(Configuring the default Icon Set)

¥Configuring the default Icon Set

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

¥There are two types of Quasar Icon Sets: webfont-based and svg-based.

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

¥Unless configured otherwise, Quasar uses Material Icons webfont as the icon set for its components. You can however tell Quasar to use some other Icon Set, but if it’s a webfont-based one then be sure to include its icon library in your website/app (see Installing Icon Libraries).

硬编码(Hardcoded)

¥Hardcoded

如果默认的 Quasar 图标集不是动态确定的（例如，不依赖于 cookie），那么你可以：

¥If the default Quasar Icon Set is not dynamically determined (does not depends on cookies for example), then you can:

Quasar CLI 方式(Quasar CLI Way)

¥Quasar CLI Way

我们再次编辑 /quasar.config 文件：

¥We edit the /quasar.config file again:

framework: {
  // webfont-based example
  iconSet: 'mdi-v7'
}

framework: {
  // svg-based example
  iconSet: 'svg-mdi-v7'
}

要查看所有可用选项，请访问 GitHub 仓库。

¥For all available options, visit the GitHub repository.

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

¥Full example of including MDI & Fontawesome and telling Quasar to use Fontawesome for its components.

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

这将使你能够在应用中同时使用 MDI 和 Fontawesome Web 字体，并且所有 Quasar 组件都将显示 Fontawesome 图标。

¥This will enable you to use both MDI & Fontawesome webfonts in your app, and all Quasar components will display Fontawesome icons.

Quasar UMD 方式(Quasar UMD Way)

¥Quasar UMD Way

包含适用于你 Quasar 版本的 Quasar Icon Set 标签，并告知 Quasar 使用它。示例：

¥Include the Quasar Icon Set tag for your Quasar version and also tell Quasar to use it. Example:

<!-- 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 文件中包含哪些标签。

¥Check what tags you need to include in your HTML files on UMD / Standalone page.

Quasar Vite 插件方式(Quasar Vite Plugin Way)

¥Quasar Vite Plugin Way

我们正在编辑你的 main.js：

¥We edit your 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
})

动态（在非 SSR 上）(Dynamic (on non-SSR))

¥Dynamic (on non-SSR)

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

¥Quasar CLI: If your desired Quasar Icon Set must be dynamically selected (example: depends on a cookie), then you need to create a boot file: $ quasar new boot quasar-icon-set [--format ts]. This will create /src/boot/quasar-icon-set.js file. Edit it to:

import { defineBoot } from '#q-app/wrappers'
import { IconSet } from 'quasar'

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

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

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

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

¥Then register this boot file into the /quasar.config file:

boot: [
  'quasar-icon-set'
]

动态（在 SSR 上）(Dynamic (on SSR))

¥Dynamic (on SSR)

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

¥When dealing with SSR, we can’t use singleton objects because that would pollute sessions. As a result, as opposed to the dynamical example above (read it first!), you must also specify the ssrContext from your boot file:

import { defineBoot } from '#q-app/wrappers'
import { IconSet } from 'quasar'

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

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

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

在运行时更改 Quasar 图标集(Change Quasar Icon Set at Runtime)

¥Change Quasar Icon Set at Runtime

更改图标集(Changing Icon Set)

¥Changing Icon Set

Quasar 图标集具有响应式特性，因此如果你更改 $q.iconSet 对象，所有组件都会正确更新。以下是示例：

¥Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is an example:

import { useQuasar } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v7.js'

setup () {
  const $q = useQuasar()

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

  return {
    changeIconSetToMdiIconSet
  }
}

如果你想在 .vue 文件之外执行此操作（并且你未处于 SSR 模式），则可以

¥If you want to do this outside of a .vue file (and you are NOT on SSR mode) then you can

import { defineBoot } from '#q-app/wrappers'
import { IconSet } from 'quasar'
import mdiIconSet from 'quasar/icon-set/mdi-v7.js'

export default defineBoot(() {
  IconSet.set(mdiIconSet)
})

更改特定图标(Changing a Specific Icon)

¥Changing a Specific Icon

如果你想将特定图标更改为其他图标，你可以这样做。以下是示例：

¥If you want to change a specific icon to another, you can. Here is an example:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

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

  return { changeQEditorHeaderIcon }
}

如果你想在 .vue 文件之外执行此操作（并且你未处于 SSR 模式），则可以

¥If you want to do this outside of a .vue file (and you are NOT on SSR mode) then you can

import { IconSet } from 'quasar'

export default () {
  IconSet.props.editor.header1 = 'fas fa-font'
}