Modern Controls in PowerApps Canvas Apps have been with us for a few years now. And while they are still in preview at the time of this post, some controls are more “mature” than others from my experience. One of these is the button control. Unlike the classic button control, the modern one can include an icon within the button making for a better visual experience to the end-user. Indeed, there are 73 modern button icons to choose from. Where I had some challenges however, is that I wanted to know all the icon names so I can easily reference them dynamically as well as see them all at a better glance. Surprisingly, Microsoft’s official MS Learn Article doesn’t include the names or icon images in a detailed list!
Therefore, I created a “cheat sheet” of sorts that’ll allow you to see them along with their text names. These text names are key because they are what actually references the icon in the button’s properties. With this in mind, we can reference the names in more dynamic scenarios as I’ll showcase in my example at the end.
The Complete Icon Name List
Here’s a screenshot containing all of the button icon names and what they look like. You can also copy/paste the yaml code below into your canvas app.
- galIcons:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
BorderColor: =RGBA(0, 18, 107, 1)
Height: =768
Items: |-
=Table(
[
"Add",
"Airplane",
"AppsListDetail",
"AppsList",
"ArrowClockwise",
"ArrowDownload",
"ArrowDown",
"ArrowExit",
"ArrowLeft",
"ArrowReset",
"ArrowRight",
"ArrowSort",
"ArrowSync",
"ArrowUndo",
"ArrowUp",
"Attach",
"CalendarAdd",
"Calendar",
"Camera",
"Cart",
"Chat",
"CheckmarkCircle",
"Checkmark",
"ChevronDown",
"ChevronLeft",
"ChevronRight",
"ChevronUp",
"Circle",
"ClockAlarm",
"Clock",
"Copy",
"Database",
"Delete",
"DismissCircle",
"Dismiss",
"DocumentAdd",
"DocumentBulletList",
"DocumentPdf",
"Document",
"Edit",
"EmojiSmileSlight",
"Eraser",
"ErrorCircle",
"Eye",
"Filter",
"GlobeArrowUp",
"GlobeError",
"GlobeProhibited",
"Globe",
"GlobeSync",
"GlobeWarning",
"GridDots",
"History",
"Home",
"Info",
"Link",
"Mail",
"Money",
"MoreHorizontal",
"Open",
"PeopleAdd",
"People",
"Person",
"Print",
"Question",
"SaveCopy",
"Save",
"Search",
"Send",
"ServiceBell",
"Settings",
"TextCaseTitle",
"Warning"
]
)
TemplateSize: =60
Width: =862
Children:
- con_Icon_Row:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
Height: =Parent.TemplateHeight
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =10
LayoutJustifyContent: =LayoutJustifyContent.Center
PaddingBottom: =10
PaddingLeft: =10
PaddingRight: =10
PaddingTop: =10
Width: =Parent.TemplateWidth
Children:
- txt_Icon_Text:
Control: Text@0.0.51
Properties:
FillPortions: =1
Height: =40
PaddingLeft: =12
Text: =ThisItem.Value
VerticalAlign: =VerticalAlign.Middle
X: =40
Y: =28
- btn_Icon_Primary:
Control: Button@0.0.45
Properties:
Height: =40
Icon: =ThisItem.Value
Text: =ThisItem.Value
Width: =160
- btn_Icon_Secondary:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Secondary
Height: =40
Icon: =ThisItem.Value
Text: =ThisItem.Value
Width: =160
- btn_IconOnly:
Control: Button@0.0.45
Properties:
Height: =40
Icon: =ThisItem.Value
Layout: ='ButtonCanvas.Layout'.IconOnly
Text: =ThisItem.Value
Width: =40
X: =448
Y: =14
Example: Creating a Menu Collection with Dynamic Icons
A common scenario is building a menu navigation collection that contains various icons. Consider I have a simple 3 button menu navigation using this PowerFx Code:
ClearCollect(
colNavigation,
{
ID: 1,
Name: "Home",
Icon: "Home",
NavScreen: 'Home Screen'
},
{
ID: 2,
Name: "Employee",
Icon: "Person",
NavScreen: 'Person Screen'
},
{
ID: 3,
Name: "Calendar",
Icon: "Calendar",
NavScreen: 'Calendar Screen'
}
);
Bind the gallery to the collection and add the modern button. Then, on the button’s properties, set the Text and Icon Properties to ThisItem.Name and Thisitem.Icon respectively.
Remember that PowerFx code is Case-Sensitive so make sure your icon name references follow the proper case name otherwise it will show as the “circle” icon if the icon name wasn’t found.
