Installing Icon Libraries

You’ll most likely want icons in your website/app and Quasar offers an easy way out of the box, for following icon libraries: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons and Themify Icons.

TIP

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

Icon sets 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',
  'mdi-v3',
  'ionicons-v4',
  'eva-icons',
  'fontawesome-v5',
  'themify'
]

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. Simply edit index.template.html as follows.

The example link tag below would include Fontawesome v5.6.3 icons. Do a Google search for CDNs to make sure you include the latest version. The following are just examples.

<!-- in `/src/index.template.html` -->

<head>
  ...

  <!-- CDN example for Material Icons -->
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  >

  <!-- CDN example for Fontawesome 5.6.3 -->
  <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
    crossorigin="anonymous"
  >

  <!-- CDN example for Ionicons -->
  <link
    href="https://unpkg.com/ionicons@4.5.0/dist/css/ionicons.min.css"
    rel="stylesheet"
  >
</head>

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

export default () => {
  // Leave blank or make something cool.
}
  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’s quasar/icons/fontawesome-v5-pro.js

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

chip: {
  close: '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'

export default ({ Vue }) => {
  Vue.prototype.$q.iconSet.chip.close = 'fas fa-times-circle'
}