Toggle Between Filled and Non-Filled Icons in Power Apps

Loading

Toggle Between Filled and Non-Filled Icons in Power Apps

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.

Video