(I’m writing this while 1.0 is in beta, however, neither the current docs for 0.17+ nor 1.0+ appear to support custom font sets.)
Using Fontello, for example:
- Select the Fontello icons you want, then in Settings, use a unique CSS prefix (for example,
abc-
), then name and download your font package as a ZIP.
- Create a new folder inside
/quasar/node_modules/quasar-extras
for your custom font
- Inside the new folder, copy the base CSS file from the ZIP download
- Also inside the new folder, copy the
font
folder from the ZIP, including the folder contents
- Note: Fontello’s CSS puts the CSS in its own subfolder, whereas we have put the CSS in the base folder, which is required by Quasar (because of css-loader module). This means we will need to slightly edit the CSS file so the path for the font files start with
./font
instead of ../font
Keep in mind if you add new icons and re-download the ZIP, you’ll have to re-edit the new CSS file
- In the
quasar-extras
folder, copy the ionicons.js
file, rename it for your custom font, and edit the file so it points to your new CSS file
- In
quasar.conf.js
, add your font in the extras
section
- Final step - however, this edit is likely to be overwritten any time you upgrade Quasar, so it will likely have to be repeated later. Check your custom fonts any time you upgrade. Edit the file
/quasar/node_modules/quasar-framework/src/components/icon/QIcon.js
. Line 18 (on 0.17+) includes the code || icon.startsWith('icon-')
. Copy this and paste it right after itself, except change icon-
to the custom prefix you set in Fontello. So now the line contains || icon.startsWith('icon-') || icon.startsWith('abc-')
- Basically, you are telling Quasar not to mess with the class of the icon, not to assume it is part of a different icon set.
Now, you should be able to use <q-icon>
tags or icon=""
attributes inside Quasar components with your own font icons!
Because you have to edit the source code of QIcon.js
, this is hacky and not stable. If I could make a request/recommendation, I would like to see the ability to define a list of icon prefixes which Quasar would know not to change (currently, an unrecognized or unprefixed icon name is assumed to be from the Material Icon set). Something like { custom: ['abc-' , 'myicons-' , 'app-'] }
in the extras
section of quasar.conf.js
.