Change icon of ui.stepper step

[nils-ossenbrink]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui


def mix():
    # Change icon here
    stepper.next()


with ui.stepper().props('vertical').classes('w-full') as stepper:
    with ui.step('Preheat'):
        ui.label('Preheat the oven to 350 degrees')
        with ui.stepper_navigation():
            ui.button('Next', on_click=stepper.next)
    with ui.step('Ingredients'):
        ui.label('Mix the ingredients')
        with ui.stepper_navigation():
            ui.button('Mix', on_click=mix)
            ui.button('Next', on_click=stepper.next)
            ui.button('Back', on_click=stepper.previous).props('flat')
    with ui.step('Bake'):
        ui.label('Bake for 20 minutes')
        with ui.stepper_navigation():
            ui.button('Done', on_click=lambda: ui.notify('Yay!', type='positive'))
            ui.button('Back', on_click=stepper.previous).props('flat')

ui.run()

Description

I would like to change the icon of the step if "mixing" fails. How to archive this?

NiceGUI Version

2.24.1

Python Version

3.12.2

Browser

Chrome

Operating System

Windows

Additional Context

No response

[Anindya088]

Hi @nils-ossenbrink ,

Do you mean something like this?

from nicegui import ui


def mix():
    # Change icon here
    ingredients.props('active-icon="warning" active-color="red" done-icon="warning" done-color="red"')
    mix_label.set_text('Sorry! Mixing failed')
    mix_label.classes('text-red')

with ui.stepper().props('vertical').classes('w-full') as stepper:
    with ui.step('Preheat'):
        ui.label('Preheat the oven to 350 degrees')
        with ui.stepper_navigation():
            ui.button('Next', on_click=stepper.next)
    with ui.step('Ingredients') as ingredients:
        mix_label = ui.label('Mix the ingredients')
        with ui.stepper_navigation():
            ui.button('Mix', on_click=mix)
            ui.button('Next', on_click=stepper.next)
            ui.button('Back', on_click=stepper.previous).props('flat')
    with ui.step('Bake'):
        ui.label('Bake for 20 minutes')
        with ui.stepper_navigation():
            ui.button('Done', on_click=lambda: ui.notify('Yay!', type='positive'))
            ui.button('Back', on_click=stepper.previous).props('flat')

ui.run()

[nils-ossenbrink]

Thanks! That's exactly what I was looking for...

Cheers
Nils