Power Apps Button With Icon And Text

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-button-with-icon-and-text/. Author: Matthew Devaney.

Power Apps Button With Icon And Text Posted by - Matthew Devaney on - February 12, 2023 28 Comments

Icons can easily be added to Power Apps buttons with a little bit of creative coding. The trick is to place an icon on top of the button. Then trigger both the icon and button to change color when an invisible overlay above them is pressed. We can add a subtle hover effect on the button too. In the Power Apps article, I will teach you how to make a button with an icon and text. Table of Contents Introduction: The Save Button

Add A Container To Hold The Button & Icon

Create A Power Apps Button Inside The Container Insert An Icon Into The Container

Position An Overlay Button Above The Icon & Save Button

Change Icon & Save Button Color When Pressed Introduction: The Save Button

The Save button can be clicked while filling out a form to save the user’s progress. This Power Apps button has an icon and words Save. When a user presses the button both the icon and text change color at the same time.

Add A Container To Hold The Button & Icon

Open Power Apps Studio and start a new app from blank. Add a container control to the app. The Power Apps button with an icon will be built inside of the container to make it easier to maintain.

Change the height and width properties of the container to the values below. Height : 80 Width : 240 Code language: HTTP ( http )

Create A Power Apps Button Inside The Container

Insert a new button named btn_Save into the container.

Make the button fill the entire space inside the container by updating its properties with the values below. It the container is re-sized, the button will re-size itself too. This makes our button with an icon re-usable in other places.

Height: con_SaveButton.Height- Self .BorderThickness Width: con_SaveButton.Width- Self .BorderThickness X: Self .BorderThickness/ 2 Y: Self .BorderThickness/ 2 Code language: PHP ( php )

Update the button’s text to the word Save . Position the text on the right side of the button. Leave a blank space for a button on the left-side.

Change the button properties to this code to re-position the text.

Align: Center PaddingLeft 80 PaddingRight: 0 PaddingTop: 0 PaddingBottom: 0

We want the button background to be green to indicate that saving is a positive action.

Use these values to update the button’s style. BorderColor : RGBA(40,167,69,1) Color : White Fill : RGBA(40,167,69,1) Code language: HTTP ( http ) Insert An Icon Into The Container

Create a Save icon named ico_Save and place it in the container. Position the icon to the left of the Save text.

Give the icon these color and fill property values. Color : White Fill : Transparent Code language: HTTP ( http )

Position An Overlay Button Above The Icon & Save Button

To make the icon and the save button’s color change at the same time they need to be triggered by common event. We will place a transparent button on top of the other controls. Then, when the transparent button’s pressed output property changes to true the icon and button will change color.

Insert a new button called btn_Overlay into the container.

Position the new overlay button directly over top of btn_Save . Height : btn_Save .Height Width : btn_Save .Width X : btn_Save .X Y : btn_Save .Y Code language: CSS ( css )

Remove any text from the overlay button and make it transparent.

Use this code to make the button see-through. Notice the HoverFill property is not fully transparent. This gives the button a subtle hover effect. BorderStyle : BorderStyle.None Color : Transparent Fill : Transparent DisabledColor : Transparent DisabledFill : Transparent HoverColor : Transparent HoverFill : RGBA(0,0,0,0.05) PressedColor : Transparent PressedFill : Transparent Code language: HTTP ( http )

Change Icon & Save Button Color When Pressed

The icon and save button must change color at the same time when pressed. Initially the button is green and the text is white.

When the button is pressed its colors become inverted. The button is white with a green border and the icon turns green.

Use this code in btn_Save to change its Color property and Fill property when btn_Overlay is pressed. Color : If ( btn_Overlay .Pressed , RGBA (40,167,69,1), White ) Fill : If ( btn_Overlay .Pressed , White , RGBA (40,167,69,1) ) Code language: CSS ( css )

And use this code in ico_Save to change its Color when btn_Overlay is pressed. Color : If ( btn_Overlay .Pressed , RGBA (40,167,69,1), White ) Code language: CSS ( css )

Test the button to make sure its style properties behave as expected. Add any code that should be executed when the button is pressed in its OnSelect property. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Button With Icon And Text please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps