Material icons vs. symbols

[PeterMarkuson]

Question

When looking up icons at fonts.google.com there are two options available for filtering:

1. Material symbols (new)
2. Material icons

It looks like UI elements like ui.icon or ui.button only support the material icons, but not the material symbols. The symbols and icons do have many names in common, but there seem to be more/other symbols than icons.

When using symbol names that are not available as icons there is a strange behaviour. Either misformating or showing two icons in the element. Try using "event_list" (not available as icon) there are two icons shown (event and list, which are both available as icons).

ui.button(icon="event_list"):

My main question is: How to enable support for material symbols as name for the icon-parameter?

BR/Peter

[falkoschindler]

Hi @PeterMarkuson,

NiceGUI supports both, icons as well as symbols: https://nicegui.io/documentation/icon#material_icons_and_symbols. You can distinguish both via a suffix:

ui.icon('home')
ui.icon('o_home')
ui.icon('r_home')
ui.icon('sym_o_home')
ui.icon('sym_r_home')

In PR #2613 we already thought about dropping support for icons, because they are deprecated and symbols are supposed to be a superset. But icons are so deeply baked into Quasar, it would get messy to replace them with symbols. E.g when writing

ui.checkbox().props('checked-icon=home')

we would need to detect the "checked-icon" prop, recognize that it defines an icon, and replace it with something like "sym_o_home". This is hard to do consistently and without unexpected behavior, so we decided to keep icons and symbols as it is right now.

[PeterMarkuson]

Thank you for your swift reply. And I need to appologize for being that noob. Honestly, I read the documentation, but the prefix for symbols was somehow a blind spot to me 😕🙄

Really apreciated your detailed answer regardless of my failure.

BR/Peter

[falkoschindler]

No worries! It's easy to miss a section in the documentation. Still room for improvement. 🙂