Toggle Between Filled and Non-Filled Icons in Power Apps

This guide covers the steps to implement icon state changes using formulas and conditional formatting, improving user experience and visual appeal.

Steps to Implement Toggle Between Icons

Step 1. Add the Two Icons.

Insert two icons: a non-filled thumb icon and a filled thumb icon from the Icons menu.

Rename them

• IconThumbNonFilled (for the non-filled thumb)
• IconThumbFilled (for the filled thumb)
  
  

Step 2. Create a Boolean Variable.

• Set a Boolean variable to track the selection state of the thumb icons.
• Select the non-filled thumb icon (IconThumbNonFilled), go to its OnSelect property, and set it to.

  Set(
      IsThumbFilled,
      true
  )

• Select the filled thumb icon (IconThumbFilled), and in its OnSelect property, set it to.

  Set(IsThumbFilled, false)

Step 3. Control the Visibility of Each Icon.

• For the non-filled thumb icon (IconThumbNonFilled), set the Visible property to.

  !IsThumbFilled

• This will show the non-filled thumb when IsThumbFilled is false.
• For the filled thumb icon (IconThumbFilled), set the Visible property to.

  IsThumbFilled

• This will show the filled thumb when IsThumbFilled is true.

Step 4. Place both the icon in the same place.