Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tlambert03 opened this issue Oct 11, 2023 · 5 comments
Open

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

tlambert03 opened this issue Oct 11, 2023 · 5 comments

Comments

@tlambert03
Copy link

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}`)
          );
        }
  1. the semantics of the icon Unicode attribute on the Button widget could be relaxed to allow for a full svg element to be passed?
  2. 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 (pyapp-kit/magicgui#598)... the qt side is very flexible thanks to iconify, but the ipywidgets side is restrictive.

@maartenbreddels
Copy link
Member

Hi Talley,

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

cheers,

Maarte

@tlambert03
Copy link
Author

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
Copy link
Member

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

@krassowski
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants