feature: support more than just font-awesome, svg icons, iconify

[tlambert03]

Problem

the built-in support for font-awesome is nice, but limited, and a bit out of date. SVGs are very flexible and there are tons of alternative libraries out there. notably, iconify provides access to a huge amount of them with a single unified API

It would be nice to be able to show SVG icons on buttons (or other places with icons).

Proposed Solution

There are likely many ways to do this, and I'm happy to implement them, but wanted to get your input first:

1. widget_button.ts could be modified to see if a colon is inside the icon name string, and if so, assume the iconify API is being used (this would require adding the iconify SVG framework js code somewhere)

       // Check if icon contains a colon
       if (icon.includes(':')) {
         // Set Iconify-specific attributes
         i.setAttribute('data-icon', icon);
         i.classList.add('iconify');
         i.classList.add('iconify-inline');
       }
       else {
         i.classList.add('fa');
         i.classList.add(
           ...icon
             .split(/[\s]+/)
             .filter(Boolean)
             .map((v: string) => `fa-${v}`)
         );
       }

2. the semantics of the icon Unicode attribute on the Button widget could be relaxed to allow for a full svg element to be passed?
3. other ideas? (i'm sure there are many, and I'm happy to look into whatever you suggest)

Additional context

i created/maintain magicgui which is an abstraction layer that lets people create guis that go from Qt to ipywidgets easily. I'm adding a PR that adds icons to buttons (https://github.com/pyapp-kit/magicgui/pull/598)... the qt side is very flexible thanks to iconify, but the ipywidgets side is restrictive.

[maartenbreddels]

Hi Talley,

does iconify add a iconset, or does this allow adding of new icons on the fly?

cheers,

Maarte

[tlambert03]

iconify itself is more like an api wrapper around many (100+) other icon sets (150,000+ total icons, searchable here).
for example: 'fa6-solid:play', 'mdi:play' from material design icons, etc...

The icon sets are actively maintained, but i don't think it allows you to, add new icons on the fly per se (they would need to be in the API).

It would require internet access (they are not pre-downloaded font files), which I can imagine not working for some ipywidgets applications. So probably not a total replacement.

[maartenbreddels]

Note there is also ipyvuetify which bundles many icons https://ipyvuetify.readthedocs.io/en/latest/usage.html#icons

[krassowski]

If SVG icons were supported, maybe in future the built-in widgets could re-use the SVG assets which are shipped by Jupyter Notebook 7+/JupyterLab (and fallback to font awesome if not available). Currently not all icons that would be needed are provided by ui-components but I would be happy to see them added if needed.

[jgunstone]

I'd love to see this - iconify in particular looks like a great way to support the addition of custom icon sets (which requires a paid account for fontawesome).