Input with icon

[AL-THE-BOT-FATHER]

from nicegui import ui
with ui.card().classes("m-auto").style("width: 500px"):
    with ui.row().classes('items-center'):
        search_field = ui.input(label="Search").props('autofocus outlined rounded item-aligned').classes('w-96 self-center')
        ui.icon('search').props("size=3rem")
        
ui.run(title="Test", dark=True)

How do I get the search icon in the input field?

Thanks.

-Allen

[rodja]

This could be related to #300?

[Diegiwg]

The input has a 'slot' called append, which does the effect you are looking for. The code would be:

from nicegui import ui

icon = ui.icon('search')

with ui.card().classes("m-auto").style("width: 500px"):
    with ui.row().classes('items-center'):
        search_field = ui.input(label="Search")
            
        append_slot = search_field.add_slot("append")
        append_slot.children.append(icon)
ui.run()

The problem: Slot only accepts a list of elements as children to be rendered.

However, I couldn't find a way to pass an element to be rendered only within the context of the slot.

Elements are always rendered in-context (correct behavior), and out-of-context (incorrect behavior).

So, in the example above, you will have the icon correctly inside the input, however, the same icon will appear on the page, as a normal element.

[falkoschindler]

See #300 (comment) for an example of how to place an icon in the"append" slot. 🙂

[Diegiwg]

I didn't know how to use the Slots, an interesting knowledge, since Quasar has several Slots.

Well, thanks to @falkoschindler, now the icon repeating problem doesn't happen anymore.

Here is an example working perfectly:

from nicegui import ui

with ui.card().classes("m-auto").style("width: 500px"):
    with ui.row().classes('items-center'):
        search_field = ui.input(label="Search")
            
        with search_field.add_slot("append"):
            icon = ui.icon('search')
ui.run()

[AL-THE-BOT-FATHER]

Thanks man. Looks good.