Installing Icon Libraries

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-v7',
  '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 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 as described there.

Using Fontawesome-Pro

If you have a Fontawesome 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:

pnpm 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-v7' // Disable free version!
],
framework: {
  // if you want Quasar to use Fontawesome for its icons
  iconSet: 'fontawesome-v7-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 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'
}

If you want to change most (or all) of the icons that the framework uses, then make a copy of the icon-set source inside your app source, change the icon styles and names as you see fit, then apply the whole set at once:

import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
import '@fortawesome/fontawesome-pro/css/solid.min.css'
import '@fortawesome/fontawesome-pro/css/light.min.css'

import iconSet from './my-fontawesome-pro-icon-set'

// example
export default ({ app }) => {
  app.config.globalProperties.$q.iconSet.set(iconSet)
}

Using Fontawesome-Pro Kits

Font Awesome Kits allow you to build a custom icon package which contains only the icon styles and individual icons that you actually use (plus any custom icons that you upload to the kit). A Pro plan allows you to download such a kit and host it from your app itself, in which case you do not need the npm registry token or the @fortawesome/fontawesome-pro package from the previous section.

1. Create a kit in your Font Awesome account and configure the icons that it should include.

2. Download the kit for self-hosting and pick the Web Fonts flavor of it (the Quasar icon sets rely on the webfont CSS classes).

3. Copy the kit’s css and webfonts folders into your app, e.g. into src/css/fontawesome-kit/. Keep the two folders siblings of each other, because the CSS files reference the fonts through a relative ../webfonts path.

4. Create a new boot file and register it, while making sure that the free version is not loaded as well:

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

boot: [
  ...
  'fontawesome-pro' // Add boot file
],
extras: [
  // 'fontawesome-v7' // Disable free version!
],
framework: {
  // if you want Quasar to use Fontawesome for its icons
  iconSet: 'fontawesome-v7-pro'
}

5. Edit /src/boot/fontawesome-pro.js to load the kit’s CSS (all.css covers every style that you included in the kit; you can also pick the individual per-style files next to it):

import 'src/css/fontawesome-kit/css/all.css'

6. (Optional) Override the default icons the same way as in the previous section, importing the kit CSS instead of the @fortawesome/fontawesome-pro files.