Ask AI
Skip to main content

Set icon of iconbutton

Function: Set icon of iconbutton​

This action allows you to dynamically change the visual icon displayed on an "Icon Button" element within your application. This is useful for providing visual feedback to users, indicating status changes, or simply updating the look of your interface based on user interactions or data.

Input,

  • UI element: This is the specific "Icon Button" component on your screen that you want to modify. You must select an existing icon button from your application's layout.
  • Icon: This is the name or identifier of the new icon you wish to display on the button. You can typically choose from a predefined library of icons available in the platform. If you leave this blank or provide an empty value, the icon on the button will usually be removed or cleared.

Output,

The icon of the specified "UI element" (icon button) will be updated on the screen. There is no direct output value returned by this action; its effect is a visual change in your application's user interface.

Execution Flow,

Real-Life Examples,

Here are a few scenarios where you might use the "Set icon of iconbutton" action:

  • Example 1: Changing a "Save" button's icon after data is saved.

    • Inputs:
      • UI element: "Save Button" (the icon button labeled "Save")
      • Icon: "check-circle" (a green checkmark icon)
    • Result: After a user successfully saves data, the "Save Button" on the screen instantly changes its icon from a floppy disk to a green checkmark, visually confirming the save operation.

  • Example 2: Updating a "Favorite" button's icon to reflect its state.

    • Inputs:
      • UI element: "Favorite Button" (the icon button used to mark an item as a favorite)
      • Icon: "heart-filled" (if the item is now a favorite) or "heart-outline" (if the item is no longer a favorite)
    • Result: When a user clicks the "Favorite Button," its icon toggles between an empty heart and a filled heart, clearly showing whether the item is currently marked as a favorite.

  • Example 3: Clearing an icon from a button to simplify the interface.

    • Inputs:
      • UI element: "Filter Options Button" (an icon button that previously showed a filter icon)
      • Icon: "" (an empty string, indicating no icon)
    • Result: The "Filter Options Button" no longer displays any icon, showing only its text label, making the interface cleaner when no specific filter is active.