Quasar: Update Ionicons from v4 to v5

[Landen13]

Ionicons v5 have 1200+ icons (v4 is twice smaller) and new types of icons (outlined / filled, while v4 has division by platforms - android and ios).
It would be awesome if Quasar Extras will have the latest version of Ionicons, one of the best open-source icons library out there.

[hawkeye64]

V5 NPM package is missing woff files and css needed for extras to work.

I have added an issue here: https://github.com/ionic-team/ionicons/issues/785

[hawkeye64]

Still no response from ionic team after 8 days. I am afraid the ionic icons in extras will be stuck at fixed version and probably removed from v2 if they don't resolve this.

[Landen13]

@hawkeye64 do we really need woff files? Maybe there is a point to drop support of woff version and leave just only svg?

woff files were not updated in repository after the update to 5 version, so it requires some extra work for ionic team to bring woff files into npm package.

[hawkeye64]

@Landen13 For Quasar extras, it'd be a breaking change not to have the woff files for backwards compatibility. The individual svg's would still work for importing them individually with the new enhancements to extras that allows that. I suspect, ionic will be frozen, until v2 release of extras, at which time, we can do breaking changes.

[dsheard]

Also ttf files please

[Quasarman]

Any updates on the timeline when the support for ionicons v5 is planned?

[hawkeye64]

Ionicons has changed their format and no longer off an svg font file (woff). In regards to this, you can always load the SVGs yourself as outlined by the Quasar docs for external SVGs. Just because we can't integrate the latest into @quasar/extras right now, does not preclude you from using them yourselves.

[Quasarman]

@hawkeye64 Thanks for the tipp this was very helpful. I managed to include the ionicons v5 by following the very clear instructions in the quasar doc's, https://quasar.dev/vue-components/icon#Custom-mapping. This seems to work fine the icons are displayed correctly the only thing im not quite figuring out is how to color the icons or if this is even possible since the icons are only mapped as svgs? I have tried it with the quasar prop color as well as with css nothing seems to work. Thanks for your help so far.

[rstoenescu]

Will add ionicons v5 only in svg form in quasar/extras.

[Quasarman]

Thanks for the update! 👍

[Lobidu]

@Quasarman - do you have an example of your implementation? I was looking for this and don't know how to use custom mapping with Ionicon's custom tag.

[Quasarman]

@Lobidu Hey, no not anymore I got rid of my implementation since the coloring of the icons dosen't seem to work properly, so I'm just waiting till ionicons v5 support is coming to quasar/extras, as @rstoenescu already mentioned. If you still want to use custom mapping I suggest having a look at the quasar docs they are really helpful: https://quasar.dev/vue-components/icon#Custom-mapping

[rstoenescu]

Ionicons v5 will be available in SVG format only through "@quasar/extras" v1.7.0.
Quasar Icon Set for ionicons v5 (again, svg only) will be available in "quasar" v1.10.0.