Using a custom icon font (Fontello, Flaticons, etc)

[terrybradshaw]

(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.

[nothingismagick]

tl;dr; Please don’t do this!

@terrybradshaw - this is not just “hacky and not stable”, it is really bad practice and definitely NOT something that the core team recommends. Tampering with quasar breaks the contract of the code - and I am already having a stomach ache because I am sure someone will try the things you just suggested, it will break and then they’ll be visiting the quasar discord with their “problem”.

What are the “right” ways to do this?

• Make a PR with your custom icon font and share your work with the community.
• Make a webpack loader (probably too complex)
• Create a custom “app-extension” (how-to forthcoming)

[terrybradshaw]

Sorry for the late response. Quasar is a great project and I certainly don’t mean to violate the wishes of the core project team. But, as far as I can tell, there is no supported way to use a font created with Fontello, and the project I’m working on needed some icons that weren’t part of the supported sets.

I did suggest a fix for future development (defining custom font prefixes in quasar.conf.js), but given that we are presently right between 0.17 and 1.0 beta I am not comfortable creating a PR because I don’t want to break backwards compatibility, nor do I want to introduce new features during a beta/RC phase. Or when the app-extension docs are available, I can look into that.

[dteurope]

@terrybradshaw: Did you opened a PR or Feature Request for this issue? It would be awesome to get custom fonts into Quasar. We are at version 1.2.6 now.