Quasar 已经提供了几套开箱即用的图标库：Material Icons、Material Symbols、Font Awesome、Ionicons、MDI、Eva Icons、Themify Icons、Line Awesome 和 Bootstrap Icons。但是您仍然可以自行添加其他的图标库。
TIP
关于字体图标库，您可以选择安装一个或多个。
安装字体图标库
如果您只是构建一个网站，那么可以使用 CDN（内容分发网络）来引用图标资源。但如果您需要构建移动端 app 或 Electron 程序，那么您可能不希望图标依赖网络连接，Quasar 为您提供了解决方案：
编辑 /quasar.config 文件：
extras: ["material-icons"];字体图标会通过 @quasar/extras 来提供。您不需要在应用中导入它们，只需像上述方式配置 /quasar.config 文件即可。
也可以同时开启多个图标库：
extras: [
"material-icons",
"mdi-v7",
"ionicons-v4", // last webfont was available in v4.6.3
"eva-icons",
"fontawesome-v6",
"themify",
"line-awesome",
"bootstrap-icons",
];全部可用图标库列表请见：GitHub
您现在可以在 QIcon 组件中使用这些图标了。
使用 CDN 替代
如果您想使用 CDN（内容分发网络），您只需要在 /index.html 文件中添加指向 CDN URL 的 style 标签。
如果您选择这种方式，则不要同时在 /quasar.config file > extras 中配置您想使用的图标集。请参考 UMD 安装指南并按照描述编辑 /index.html。
使用 Fontawesome-Pro
如果您有 Fontawesome v6 Pro 的许可证，可以按照下述步骤使用 Pro 版本来替换免费版本：
- 打开 Fontawesome 用户账户页面的 Linked Accounts 部分获取 npm TOKENID（需要登录）。
- 创建或追加 TOKENID 到
.npmrc文件（文件路径与 package.json 相同）：
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID- 安装 Fontawesome webfonts：
$ yarn add @fortawesome/fontawesome-pro- 创建一个新的 boot 文件：
$ quasar new boot fontawesome-pro [--format ts]- 编辑
/quasar.config文件：
boot: [
...
'fontawesome-pro' // Add boot file
],
extras: [
// 'fontawesome-v6' // Disable free version!
],
framework: {
// if you want Quasar to use Fontawesome for its icons
iconSet: 'fontawesome-v6-pro'
}- 编辑
/src/boot/fontawesome-pro.js：
// 必须的
import "@fortawesome/fontawesome-pro/css/fontawesome.css";
import "@fortawesome/fontawesome-pro/css/light.css";
// 可选的
// import '@fortawesome/fontawesome-pro/css/thin.css'
// import '@fortawesome/fontawesome-pro/css/duotone.css'
// import '@fortawesome/fontawesome-pro/css/brands.css'
// import '@fortawesome/fontawesome-pro/css/solid.css'
// import '@fortawesome/fontawesome-pro/css/regular.css'- （可选）覆盖默认图标：
由于 fontawesome-pro 默认的 font-weight 是 light 或 fal，导致一些框架组件使用的图标可能不太美观。最好的处理方式是在您创建的 boot 文件中覆盖它。
例如，要覆盖 chip 关闭按钮的 fal 版本图标，首先在 Quasar Fontawesome v6 Pro 图标集源码中找到 chip 关闭使用的图标。
（或者，您也可以查看要覆盖的组件的渲染函数。）
chip: {
remove: 'fal fa-times-circle'然后在 /src/boot/fontawesome-pro.js 中覆盖它：
import "@fortawesome/fontawesome-pro/css/fontawesome.min.css";
import "@fortawesome/fontawesome-pro/css/solid.min.css";
import "@fortawesome/fontawesome-pro/css/light.min.css";
// example
export default ({ app }) => {
app.config.globalProperties.$q.iconSet.chip.remove = "fas fa-times-circle";
};