Displaying / rendering more icons than just the mapped ones?

Hello,

in velocity for example with $services.icon.iconNames I can get a list of all mapped icons in the current selected Icon Theme and with $services.icon.render($icon) I can render an icon that is included in that list. However if im not wrong, these icon themes have more icons than the mapped ones.
For example Font Awesome 5 Icon Theme (XWiki.org) seems to have 464 Icons, but only 295 are mapped.

Is there a way to render the not mapped ones?

Yes, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Icon%20Theme%20Application#HDisplayinginaScript

However this means that if the admin changes the icon theme yours icon won’t change ofc.

I am aware of that but expected that to be only usable for the mapped icons and were searching of a way to display / render unmapped ones that are included in the Icon Themes.
But after inspecting some Icon Theme extension XARs I now think to understand, that the Icon Themes themself don’t include the symbols but seem to only handle the referencing to the online sources and do some mappings for commonly used Icon names in XWiki for better compatibility.

As Material includes @import url('https://fonts.googleapis.com/css?family=Material+Icons')
or Font Awesome 5 includes @import "https://use.fontawesome.com/releases/v5.0.1/css/all.css
Can I therefore when using Fonts Awesome 5 as example easily display / render Icons that are not in the mapping list just by listing the names that Fonts Awesome 5 uses (for example “hamburger”) ?
Or do I necessarily need to make an own Icon pack and map additional icons to onw names?

Also, is XWikis Fonts Awesome 4 included offline or does it always load the fonts from an online source too? That Icon Theme doesn’t seem to include an online URL but I can also find no path on the XWiki installation.

It is “offline” in the sense that the icons are included in XWiki and requested from a URL on your XWiki installation. The files are included in a so-called “webjar” (font-awesome-4.7.0.jar to be precise) that contains both the CSS and the font.

When using the Font Awesome icon theme, you can manually display any Font Awesome icon using the HTML that is normally used to display them as XWiki loads the full CSS of Font Awesome that includes all Font Awesome icons. You cannot display them using $services.icon.render, though, this only works for icons that are listed in the icon theme. What you could do but what might cause problems on upgrades is to edit IconThemes.FontAwesome to add your own mappings that would then be usable through $services.icon.render. On an upgrade, XWiki will attempt a merge of any changes in this page with your changes, but this merge might fail when there are incompatible changes in XWiki. You’ll get a question during the upgrade what to do in such a case.

Icon themes exist to keep XWiki’s code independent of a specific icon theme and to allow users to switch between different icon themes.

1 Like

Thank you very much for that comprehensive explanation, this helps alot!