You’ll most likely want icons in your website/app and Quasar offers an easy way out of the box for the following icon libraries: Material Icons, Material Symbols, Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons, Line Awesome and Bootstrap Icons. But you can add support for others by yourself.

Installing Webfonts

If you are building a website only, then using a CDN (Content Delivery Network) approach can be an option you can follow. However, when building a mobile or Electron app, you most likely do not want to depend on an Internet connection and Quasar comes with a solution to this problem:

Edit the /quasar.config file:

extras: [
  'material-icons'
]

Webfont icons are available through @quasar/extras package. You don’t need to import it in your app, just configure the /quasar.config file as indicated above.

Adding more than one set:

extras: [
  'material-icons',
  'mdi-v7',
  'ionicons-v4', // last webfont was available in v4.6.3
  'eva-icons',
  'fontawesome-v6',
  'themify',
  'line-awesome',
  'bootstrap-icons'
]

For all available options, visit the GitHub repository.

You’re now ready to use the QIcon component.

Using CDN as alternative

If you want to make use of a CDN (Content Delivery Network), all you need to do is to include style tags in your /index.html or /src/index.template.html file which point to the CDN URL.

In case you follow this path, do not also add the icon sets that you want in /quasar.config file > extras. Play with the UMD Installation Guide and edit /index.html or /src/index.template.html as described there.

Using Fontawesome-Pro

If you have a Fontawesome v6 Pro license and want to use it instead of the Fontawesome Free version, follow these instructions:

1. Open the Linked Accounts section in Fontawesome’s user account page to grab the npm TOKENID (login if necessary).
2. Create or append TOKENID into the .npmrc file (file path same as package.json):

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKENID

3. Install Fontawesome webfonts:

$ yarn add @fortawesome/fontawesome-pro

4. Create new boot file:

$ quasar new boot fontawesome-pro [--format ts]

5. Edit the /quasar.config file:

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'
}

6. Edit /src/boot/fontawesome-pro.js:

// required
import '@fortawesome/fontawesome-pro/css/fontawesome.css'
import '@fortawesome/fontawesome-pro/css/light.css'
// do you want these too?
// 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'

7. (Optional) Override default icons:

Since the default font-weight for fontawesome-pro is light or fal, some icons used by the framework components may not be desirable. The best way to handle this is to override it in the boot file that you created.

For instance, to override the fal version of the close icon for chips, do this:

First, find the icon used for chip close in Quasar Fontawesome v6 Pro icon-set source.

(Alternatively, you can check inside the render function of the component you are overriding.)

chip: {
  remove: 'fal fa-times-circle'

Then, override it in your /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'
}