Installing Icon Libraries

This page refers to using webfont icons only. Svg icons do not need any installation step.

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 , Font Awesome, Ionicons, MDI, Eva Icons, Themify Icons and Line Awesome. But you can add support for others by yourself.

TIP

In regards to webfont icons, you can choose to install one or more of these icon libraries.

Installing

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 /quasar.conf.js:

extras: [
  'material-icons'
]

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

Adding more than one set (showing all options):

extras: [
  'material-icons',
  'material-icons-outlined',
  'material-icons-round',
  'material-icons-sharp',
  'mdi-v3',
  'ionicons-v4',
  'eva-icons',
  'fontawesome-v5',
  'themify',
  'line-awesome'
]

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.template.html which point to the CDN URL.

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

Using Fontawesome-Pro

If you have a Fontawesome 5 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
  1. Install Fontawesome webfonts:
$ yarn add @fortawesome/fontawesome-pro
  1. Create new boot file:
$ quasar new boot fontawesome-pro
  1. Edit /quasar.conf.js:
boot: [
  ...
  'fontawesome-pro' // Add boot file
],
extras: [
  // 'fontawesome' // Disable free version!
],
framework: {
  // if you want Quasar to use Fontawesome for its icons
  iconSet: 'fontawesome-v5-pro'
}
  1. 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/brands.css'
// import '@fortawesome/fontawesome-pro/css/solid.css'
// import '@fortawesome/fontawesome-pro/css/regular.css'
  1. (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 v5 Pro icon-set source.

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

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

Then, override it in your /src/boot/fontawesome-pro.js

import Vue from 'vue'

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
Vue.prototype.$q.iconSet.chip.remove = 'fas fa-times-circle'