menu_item doesn't have the icon parameter

[Mte90]

The chip component has that parameter but the menu_item it is missing.

Quasar already support that but it is missing in nicegui.

with ui.menu().props('fit transition-show="flip-right" transition-hide="flip-left"') as menu:
    ui.menu_item('📝 Edit', on_click=lambda: print('Edit')).classes('min-w-12')

Right now we are using emoji but it sot very good and inject ui.icon get a wrong position in my tests.

[EugenioPetulla]

it will be a great nice to have for action menus!

[rodja]

Great suggestion. Would you like to create a pull request?

[falkoschindler]

@Mte90 As far as I know, Quasar's QItem doesn't have an "icon" prop, but you need to nest item sections with icons. This is already possible in NiceGUI:

with ui.button(icon='menu'):
    with ui.menu():
        with ui.menu_item():
            with ui.item_section().props('avatar'):
                ui.icon(name='bluetooth')
            ui.item_section('Icon as avatar')

If we were to introduce an item parameter for ui.menu_item, I'm not sure how to integrate it into the existing implementation. We can't simply set an "icon" prop but need to create item sections, which might conflict with user code.

What about introducing a ui.item_icon element which translates to an avatar item section like this:

with ui.button(icon='menu'):
    with ui.menu():
        with ui.menu_item():
            ui.item_icon('bluetooth')
            ui.item_section('Icon as avatar')

[EugenioPetulla]

That's even better to me! More granular control over elements 👍🏼

[falkoschindler]

Thinking about my proposed ui.item_icon element: This might lead to confusion when adding classes, styling or props, because it is unclear whether the item section or the icon is targeted. Therefore we suggest to simply add my first example to the documentation.