Except for IcoMoon (which has a license), you can either choose to use only one of them or use multiple. Quasar just needs to know which icon set to use for its components.

We’ll see how we can install an icon set in the following section.Please submit a request if your favorite font icon is not listed here.

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, so it’s best that you follow the next steps.

IMPORTANTDue to the license of IcoMoon and its custom build option, this icon font is not provided by out of the box. You will need to use their website to create your custom icon font files and then copy them to your app’s folder and import them in an app plugin ($ quasar new plugin icomoon).

Adding an Icon Set

First step is to make an icon set available in your website/app. For this, 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.

Adding more than one set (showing all options):

extras: ['material-icons','mdi','ionicons','fontawesome']

Quasar Using an 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 step above: Adding an Icon Set).

So let’s say we included Ionicons and we want Quasar to use it for its components. We edit /quasar.conf.js again:

framework: { iconSet: 'ionicons'}

Full Example

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

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 plugin 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-pro.js

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