Quasar Icon Sets

Quasar components have their own icons. Rather than forcing you into using one icon library in particular (so that they can display correctly), Quasar lets you choose which icons it should use for its components. This is called a Quasar Icon Set.

You can install multiple icon libraries, but you must choose only one to use on Quasar’s components.

Quasar currently supports: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons, and Themify Icons.

It is also possible to use your own icons (as images in any format) with any Quasar component, see the QIcon page for more info on this.

Installing a Quasar Icon Set

Unless configured otherwise, Quasar uses Material Icons as its icon set for its components. You can however tell Quasar to use some other icon set, but be sure to include that set in your website/app (see Installing Icon Libraries).

So let’s say we included Ionicons and we want Quasar to use it for its components.

Quasar CLI Way

We edit /quasar.conf.js again:

framework: {
  iconSet: 'fontawesome-v5'
}

For all available options, visit the GitHub repository.

Full Example

Here is an example of including Ionicons & Fontawesome and telling Quasar to use Fontawesome for its components.

extras: [
  'ionicons-v4',
  'fontawesome-v5'
],
framework: {
  iconSet: 'fontawesome-v5'
}

This will enable you to use both Ionicons & Fontawesome in your app, and all Quasar components will display Fontawesome icons.

Changing Icon Set Dynamically

Quasar Icon Set is reactive, so all components will update properly if you change the $q.iconSet object. Here is an example:

methods: {
  changeIconSetToFontAwesome () {
    this.$q.iconSet = require('quasar/icon-set/fontawesome-v5.js').default
  }
}

Changing a Specific Icon Dynamically

If you want to change a specific icon to another, you can. Here is an example:

methods: {
  changeQEditorHeaderIcon () {
    this.$q.iconSet.editor.header1 = 'fas fa-font'
  }
}

UMD Way

Include the Quasar Icon Set tag for your Quasar version and also tell Quasar to use it. Example:

<!-- include this after Quasar JS tag -->
<script src="https://cdn.jsdelivr.net/npm/quasar@v1.0.0/dist/icon-set/fontawesome-v5.umd.min.js"></script>
<script>
  Quasar.iconSet.set(Quasar.iconSet.fontawesomeV5)
</script>

Check what tags you need to include in your HTML files by generating a sample with $ quasar create <folder> --kit umd and specifying an icon set (other than the default “material-icons”).

Vue CLI Way

We edit your main.js:

import iconSet from 'quasar/icon-set/fontawesome-v5'
// ...
import { Quasar } from 'quasar'
// ...
Vue.use(Quasar, {
  // ...,
  iconSet: iconSet
})