Back to LibraryButtons
Button with Icon
Added Aug 10, 2026
An outline button pairing an icon with text, with the icon chosen from a curated set of Power Apps built-in icons. Inspired by the shadcn/ui ButtonWithIcon composition.
Dark Mode
CopySnips Live Preview
How to Use
- On the Settings tab, edit the button text and pick its icon from the dropdown (each option shows the actual icon glyph, not just its name), a curated set of Power Apps built-in icons, since Power Apps has no arbitrary icon-library support. The Preview tab and the copyable YAML update together.
- Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conButtonWithIcon) is added.
- The button is really 3 stacked layers: a decorative background Image (the outline chrome), the icon + label, and a fully transparent click-target Button on top. The click target never has a Fill, so it can never visually hide the icon/text beneath it; hover shows as a border only.
- Clicking the button shows a generic confirmation toast (Notify()), a placeholder since there's no real action wired up; edit btnButtonWithIconHit's OnSelect for your real logic once connected.
- Button text has a fixed-width Label (lblButtonWithIcon, Width:=130). The Settings tab caps entry at 24 characters to keep the button looking right; widen the Label (and the root's own Width) directly in the pasted YAML if you need more room than that.
- No OnVisible initialisation needed.
Problem Solved
Provides a ready-made icon+text button with icon selection exposed as a simple settings dropdown (with real icon previews, not just names). Power Apps has no native "icon inside a button" composition, so this is normally hand-built as a multi-layer overlay each time.
Integration
All content is plain settings-driven text/icon selection substituted directly into the copied YAML (no array/formula needed). Wire btnButtonWithIconHit.OnSelect to your real action once connected.
YAML Code
- conButtonWithIcon:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Height: =36
Width: =160
X: =20
Y: =20
Children:
- imgButtonWithIconBg:
Control: Image@2.2.3
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderThickness: =1
Fill: =RGBA(255, 255, 255, 1)
Image: =Blank()
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Height: =Parent.Height - 2
Width: =Parent.Width - 2
X: =1
Y: =1
- conButtonWithIconContent:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =2
PaddingLeft: =10
PaddingRight: =10
Height: =Parent.Height
Width: =Parent.Width
Children:
- icoButtonWithIcon:
Control: Classic/Icon@2.5.0
Properties:
AlignInContainer: =AlignInContainer.Center
Color: =RGBA(15, 23, 42, 1)
Icon: =Icon.Add
Height: =18
Width: =18
- lblButtonWithIcon:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Center
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =Parent.Height
Size: =10
Text: ="New Item"
Width: =130
- btnButtonWithIconHit:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =RGBA(0, 0, 0, 0)
BorderThickness: =1
Color: =RGBA(0, 0, 0, 0)
Fill: =RGBA(0, 0, 0, 0)
FocusedBorderThickness: =1
Font: =Font.'Open Sans'
HoverBorderColor: =RGBA(148, 163, 184, 1)
HoverColor: =RGBA(0, 0, 0, 0)
HoverFill: =RGBA(0, 0, 0, 0)
OnSelect: =Notify("Button clicked — wire this to your real action once connected.", NotificationType.Information)
PressedFill: =RGBA(0, 0, 0, 0)
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Text: =""
Height: =Parent.Height - 2
Width: =Parent.Width - 2
X: =1
Y: =1Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide