Merge pull request #1021 from zauberzeug/button-icon

introduce icon parameter for ui.button

examples/authentication/main.py

@@ -19,7 +19,7 @@ def main_page() -> None:
         return RedirectResponse('/login')
     with ui.column().classes('absolute-center items-center'):
         ui.label(f'Hello {app.storage.user["username"]}!').classes('text-2xl')
-        ui.button(on_click=lambda: (app.storage.user.clear(), ui.open('/login'))).props('outline round icon=logout')
+        ui.button(on_click=lambda: (app.storage.user.clear(), ui.open('/login')), icon='logout').props('outline round')
 
 
 @ui.page('/login')

examples/local_file_picker/main.py

@@ -8,6 +8,6 @@ async def pick_file() -> None:
     result = await local_file_picker('~', multiple=True)
     ui.notify(f'You chose {result}')
 
-ui.button('Choose file', on_click=pick_file).props('icon=folder')
+ui.button('Choose file', on_click=pick_file, icon='folder')
 
 ui.run()

examples/menu_and_tabs/main.py

@@ -15,7 +15,7 @@ with ui.left_drawer().classes('bg-blue-100') as left_drawer:
     ui.label('Side menu')
 
 with ui.page_sticky(position='bottom-right', x_offset=20, y_offset=20):
-    ui.button(on_click=footer.toggle).props('fab icon=contact_support')
+    ui.button(on_click=footer.toggle, icon='contact_support').props('fab')
 
 with ui.tab_panels(tabs, value='A').classes('w-full'):
     with ui.tab_panel('A'):

examples/table_and_slots/main.py

@@ -28,7 +28,7 @@ with ui.table(title='My Team', columns=columns, rows=rows, selection='multiple',
                     table.add_rows({'id': time.time(), 'name': new_name.value, 'age': new_age.value}),
                     new_name.set_value(None),
                     new_age.set_value(None),
-                )).props('flat fab-mini icon=add')
+                ), icon='add').props('flat fab-mini')
             with table.cell():
                 new_name = ui.input('Name')
             with table.cell():

examples/todo_list/main.py

@@ -39,7 +39,7 @@ def todo_ui():
         with ui.row().classes('items-center'):
             ui.checkbox(value=item.done, on_change=todo_ui.refresh).bind_value(item, 'done')
             ui.input(value=item.name).classes('flex-grow').bind_value(item, 'name')
-            ui.button(on_click=lambda item=item: todos.remove(item)).props('flat fab-mini icon=delete color=grey')
+            ui.button(on_click=lambda item=item: todos.remove(item), icon='delete').props('flat fab-mini color=grey')
 
 
 todos = ToDoList('My Weekend', on_change=todo_ui.refresh)

main.py

@@ -78,7 +78,7 @@ def add_header(menu: Optional[ui.left_drawer] = None) -> None:
             .classes('items-center duration-200 p-0 px-4 no-wrap') \
             .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
         if menu:
-            ui.button(on_click=menu.toggle).props('flat color=white icon=menu round').classes('lg:hidden')
+            ui.button(on_click=menu.toggle, icon='menu').props('flat color=white round').classes('lg:hidden')
         with ui.link(target=index_page).classes('row gap-4 items-center no-wrap mr-auto'):
             svg.face().classes('w-8 stroke-white stroke-2 max-[550px]:hidden')
             svg.word().classes('w-24')
@@ -95,7 +95,7 @@ def add_header(menu: Optional[ui.left_drawer] = None) -> None:
             svg.github().classes('fill-white scale-125 m-1')
         add_star().classes('max-[490px]:hidden')
         with ui.row().classes('lg:hidden'):
-            with ui.button().props('flat color=white icon=more_vert round'):
+            with ui.button(icon='more_vert').props('flat color=white round'):
                 with ui.menu().classes('bg-primary text-white text-lg').props(remove='no-parent-event'):
                     for title, target in menu_items.items():
                         ui.menu_item(title, on_click=lambda target=target: ui.open(target))

nicegui/elements/button.py

@@ -13,6 +13,7 @@ class Button(TextElement, DisableableElement, BackgroundColorElement):
                  text: str = '', *,
                  on_click: Optional[Callable[..., Any]] = None,
                  color: Optional[str] = 'primary',
+                 icon: Optional[str] = None,
                  ) -> None:
         """Button
 
@@ -26,9 +27,13 @@ class Button(TextElement, DisableableElement, BackgroundColorElement):
         :param text: the label of the button
         :param on_click: callback which is invoked when button is pressed
         :param color: the color of the button (either a Quasar, Tailwind, or CSS color or `None`, default: 'primary')
+        :param icon: the name of an icon to be displayed on the button (default: `None`)
         """
         super().__init__(tag='q-btn', text=text, background_color=color)
 
+        if icon:
+            self._props['icon'] = icon
+
         if on_click:
             self.on('click', lambda _: handle_event(on_click, ClickEventArguments(sender=self, client=self.client)))
 

nicegui/elements/color_input.py

@@ -31,8 +31,8 @@ class ColorInput(ValueElement, DisableableElement):
 
         with self.add_slot('append'):
             self.picker = ColorPicker(on_pick=lambda e: self.set_value(e.color))
-            self.button = ui.button(on_click=self.open_picker) \
-                .props('icon=colorize flat round', remove='color').classes('cursor-pointer')
+            self.button = ui.button(on_click=self.open_picker, icon='colorize') \
+                .props('flat round', remove='color').classes('cursor-pointer')
 
     def open_picker(self) -> None:
         """Open the color picker"""

website/documentation.py

@@ -176,7 +176,7 @@ def create_full() -> None:
     ''')
     def tooltips_demo():
         ui.label('Tooltips...').tooltip('...are shown on mouse over')
-        with ui.button().props('icon=thumb_up'):
+        with ui.button(icon='thumb_up'):
             ui.tooltip('I like this').classes('bg-green')
 
     load_demo(ui.notify)
@@ -197,7 +197,7 @@ def create_full() -> None:
     ''')
     def design_demo():
         ui.radio(['x', 'y', 'z'], value='x').props('inline color=green')
-        ui.button().props('icon=touch_app outline round').classes('shadow-lg')
+        ui.button(icon='touch_app').props('outline round').classes('shadow-lg')
         ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')
 
     subheading('Try styling NiceGUI elements!')
@@ -381,7 +381,7 @@ def create_full() -> None:
             [ui.label(f'Line {i}') for i in range(100)]
             with ui.header(elevated=True).style('background-color: #3874c8').classes('items-center justify-between'):
                 ui.label('HEADER')
-                ui.button(on_click=lambda: right_drawer.toggle()).props('flat color=white icon=menu')
+                ui.button(on_click=lambda: right_drawer.toggle(), icon='menu').props('flat color=white')
             with ui.left_drawer(top_corner=True, bottom_corner=True).style('background-color: #d7e3f4'):
                 ui.label('LEFT DRAWER')
             with ui.right_drawer(fixed=False).style('background-color: #ebf1fa').props('bordered') as right_drawer:

website/more_documentation/audio_documentation.py

@@ -5,5 +5,5 @@ def main_demo() -> None:
     a = ui.audio('https://cdn.pixabay.com/download/audio/2022/02/22/audio_d1718ab41b.mp3')
     a.on('ended', lambda _: ui.notify('Audio playback completed'))
 
-    ui.button(on_click=lambda: a.props('muted')).props('outline icon=volume_off')
-    ui.button(on_click=lambda: a.props(remove='muted')).props('outline icon=volume_up')
+    ui.button(on_click=lambda: a.props('muted'), icon='volume_off').props('outline')
+    ui.button(on_click=lambda: a.props(remove='muted'), icon='volume_up').props('outline')

website/more_documentation/button_documentation.py

@@ -13,8 +13,8 @@ def more() -> None:
     ''')
     async def icons() -> None:
         with ui.row():
-            ui.button('demo').props('icon=history')
-            ui.button().props('icon=thumb_up')
+            ui.button('demo', icon='history')
+            ui.button(icon='thumb_up')
             with ui.button():
                 ui.label('sub-elements')
                 ui.image('https://picsum.photos/id/377/640/360') \

website/more_documentation/color_picker_documentation.py

@@ -3,4 +3,4 @@ from nicegui import ui
 
 def main_demo() -> None:
     picker = ui.color_picker(on_pick=lambda e: button.style(f'background-color:{e.color}!important'))
-    button = ui.button(on_click=picker.open).props('icon=colorize')
+    button = ui.button(on_click=picker.open, icon='colorize')

website/more_documentation/input_documentation.py

@@ -37,5 +37,5 @@ def more() -> None:
         ui.input('styling', value='some text') \
             .props('input-style="color: blue" input-class="font-mono"')
         with ui.input(value='custom clear button').classes('w-64') as i:
-            ui.button(color='orange-8', on_click=lambda: i.set_value(None)) \
-                .props('icon=delete flat dense').bind_visibility_from(i, 'value')
+            ui.button(color='orange-8', on_click=lambda: i.set_value(None), icon='delete') \
+                .props('flat dense').bind_visibility_from(i, 'value')

website/more_documentation/interactive_image_documentation.py

@@ -23,6 +23,6 @@ def more() -> None:
     ''')
     def nesting_elements():
         with ui.interactive_image('https://picsum.photos/id/147/640/360'):
-            ui.button(on_click=lambda: ui.notify('thumbs up')) \
-                .props('icon=thumb_up flat fab color=white') \
+            ui.button(on_click=lambda: ui.notify('thumbs up'), icon='thumb_up') \
+                .props('flat fab color=white') \
                 .classes('absolute bottom-0 left-0 m-2')

website/more_documentation/menu_documentation.py

@@ -4,8 +4,8 @@ from nicegui import ui
 def main_demo() -> None:
     with ui.row().classes('w-full items-center'):
         result = ui.label().classes('mr-auto')
-        with ui.button(on_click=lambda: menu.open()).props('icon=menu'):
-            with ui.menu() as menu:
+        with ui.button(icon='menu'):
+            with ui.menu().props(remove='no-parent-event') as menu:
                 ui.menu_item('Menu item 1', lambda: result.set_text('Selected item 1'))
                 ui.menu_item('Menu item 2', lambda: result.set_text('Selected item 2'))
                 ui.menu_item('Menu item 3 (keep open)',

website/more_documentation/table_documentation.py

@@ -1,5 +1,3 @@
-from typing import Dict
-
 from nicegui import ui
 
 from ..documentation_tools import text_demo
@@ -65,6 +63,8 @@ def more() -> None:
         Here is an example of how to show and hide columns in a table.
     ''')
     def show_and_hide_columns():
+        from typing import Dict
+
         columns = [
             {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
             {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
@@ -85,8 +85,8 @@ def more() -> None:
             table._props['columns'] = [column for column in columns if column['name'] in visible_columns]
             table.update()
 
-        with ui.button(on_click=lambda: menu.open()).props('icon=menu'):
-            with ui.menu() as menu, ui.column().classes('gap-0 p-2'):
+        with ui.button(icon='menu'):
+            with ui.menu().props(remove='no-parent-event'), ui.column().classes('gap-0 p-2'):
                 for column in columns:
                     ui.switch(column['label'], value=True, on_change=lambda e, column=column: toggle(column, e.value))
 

website/search.py

@@ -38,7 +38,7 @@ class Search:
         ui.keyboard(self.handle_keypress)
 
     def create_button(self) -> ui.button:
-        return ui.button(on_click=self.dialog.open).props('flat icon=search color=white')
+        return ui.button(on_click=self.dialog.open, icon='search').props('flat color=white')
 
     def handle_keypress(self, e: events.KeyEventArguments) -> None:
         if not e.action.keydown: