Some icons missing

[me21]

Description

According to https://nicegui.io/documentation/icon#material_icons_and_symbols, it should be possible to use various icon sets mentioned in Quasar documentation. Specifically, I'd like to use themify icons. But ui.button(icon='ti-car') renders a button with no icon.

[falkoschindler]

Hi @me21, we currently only support material icons and symbols.

But you can simply add them with a line of custom HTML:

ui.add_head_html('<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />')
ui.icon('ti-car')

There's probably a more recent version out there, and maybe you need to download and host the CSS and the corresponding font(s). But this is a starting point, at least.

[me21]

Thank you, it worked! I downloaded the CSS and font file, placed it into a subdirectory and wrote:

app.add_static_files('/static', 'static')
ui.add_head_html('<link rel="stylesheet" href="/static/css/themify-icons.css" />', shared=True)

[me21]

Thinking wider, it would be nice to add a paragraph to the documentation about adding custom icons and/or fonts.

[rodja]

Yes Would you like to create a pull request?

[me21]

It appears there is already an example of adding custom icons: https://nicegui.io/documentation/icon#eva_icons
Maybe just some wording change is necessary to make it obvious this approach can be used for other icon sets as well...

[me21]

Please see #2620.

[falkoschindler]

Thanks again, @me21!
The new demo has just been released in version 1.4.16 and will be online shortly. 🎉

[me21]

One question: how did you find that link to themify-icons.css on jsDelivr? I tried searching, and I got a bunch of results, unsure how to choose the right one. Please see https://www.jsdelivr.com/?query=themify-icons.
In addition, their URLs seem to follow the pattern cdn.jsdelivr.net/npm/{author}/{package_name}@{version}/etc/etc..., not cdn.jsdelivr.net/{package_name}/{version}/etc/etc... like you shared.

[falkoschindler]

Oh, that URL was ChatGPT's suggestion. It seemed suspiciously outdated, but worked at least. 🙂