Button with Icon and Label: The Overlay Approach in Power Apps

In Power Apps, the standard button control only displays text. To incorporate an icon alongside the label, you can stack an icon on top of a button and manage state changes through a transparent overlay. This technique separates visual design from interaction triggers, giving you full control over the look and behaviour without custom HTML or third-party components.

The Overlay Technique at a Glance

Instead of modifying the appearance of a single control on hover or press, you place a completely transparent button over the visual elements that need to change. When that overlay is pressed, its Pressed property becomes true. Any control that references this property can instantly switch colours, borders, or fills. This keeps the visible elements stateless while the overlay handles both interaction and styling.

Scenario: Approve Expense Button

Imagine you are building an approval screen for expense reports. The primary action is a green “Approve” button that includes a checkmark icon. When the user presses it, the background turns white, the border stays green, and the icon becomes green. The feedback is immediate and clear.

Building the Button

1. Set Up the Container

Add a container control (insert from the + Insert pane) and name it con_Approve. Configure its size:

Height: 80
Width: 240

The container groups all parts together and makes the whole unit reusable.

2. Add the Background Button

Insert a button inside the container and name it btn_Show. This will be the visible part of the button that displays the word “Approve”. Make it fill the container and shift the text to the right to leave room for the icon.

Height: con_Approve.Height - Self.BorderThickness
Width: con_Approve.Width - Self.BorderThickness
X: Self.BorderThickness / 2
Y: Self.BorderThickness / 2
Align: Center
PaddingLeft: 80
Text: "Approve"
Color: White
Fill: RGBA(40, 167, 69, 1)
BorderColor: RGBA(40, 167, 69, 1)

3. Add the Icon

Insert an icon (from the + Insert > Icons menu). Choose a checkmark style and name it ico_Check. Place it on the left side of the button text and style it:

Fill: Transparent
Color: White
Width: 40
Height: 40
X: 15
Y: (con_Approve.Height - Self.Height) / 2

The Y calculation centers the icon vertically.

4. Create the Overlay Button

Insert another button and name it btn_Touch. This is the invisible layer that catches the user’s tap. Position it directly over the background button.

Height: btn_Show.Height
Width: btn_Show.Width
X: btn_Show.X
Y: btn_Show.Y

Make the overlay completely transparent but keep a subtle hover effect:

BorderStyle: BorderStyle.None
Fill: Transparent
Color: Transparent
HoverFill: RGBA(0, 0, 0, 0.05)
PressedFill: Transparent
DisabledFill: Transparent
Text: ""

5. Synchronize Colour Changes

The magic happens when the overlay is pressed. Reference its Pressed property in the other controls.

Update btn_Show colour properties:

Color: If(btn_Touch.Pressed, RGBA(40, 167, 69, 1), White)
Fill: If(btn_Touch.Pressed, White, RGBA(40, 167, 69, 1))

Update ico_Check colour property:

Color: If(btn_Touch.Pressed, RGBA(40, 167, 69, 1), White)

Now, when the user presses anywhere on the button area, the overlay reports Pressed = true, and both the background button and icon instantly invert their colours.

6. Wire Up the Action

Put the actual business logic (submitting the approval, patching a data source, etc.) only on the overlay button’s OnSelect property. The visible controls remain purely cosmetic.

Performance and Delegation Notes

The Pressed property is a client-side boolean that does not require any data source calls. This technique adds zero network overhead and does not affect delegation limits. The only performance consideration is the number of controls referencing the overlay; in practice, even a dozen references are negligible.

Common Pitfalls

• Z‑order: If the overlay is not the topmost control, taps might register on the background button instead. In the container, select btn_Touch and use Bring to front.
• Hover fill: The HoverFill of the overlay must be semi‑transparent (e.g., RGBA(0,0,0,0.05)). Fully transparent hover fills remove the visual feedback.
• Copying the pattern: When duplicating this setup, remember to update the control name inside If(btn_Touch.Pressed, …) on every new button.
• Disabled mode: If you set DisplayMode to Disabled on the overlay, the Pressed property never becomes true. Use Visible instead if you need to hide the button.

Final Recommendation

This overlay pattern is lightweight, reusable, and fully customizable. You can capture it in a component (using the container as a base) and reuse it across your app with different icons, labels, and colour sets. It requires no gallery tricks, no nested timers, and no JavaScript.

References

• Matthew Devaney, “Power Apps Button With Icon And Text”, https://www.matthewdevaney.com/power-apps-button-with-icon-and-text/
• Microsoft Learn, “Button control in Power Apps”, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-button
• Microsoft Learn, “Container control in Power Apps”, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-container
• Microsoft Learn, “Icons in Power Apps”, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-shapes-icons