Using Font Awesome Icons In PowerApps

A while ago, we had a requirement to use custom icons in Power Apps and specifically font awesome icons. There is one direct way of using font awesome icons by converting the icons to SVG and using directly the SVG into image control. Using the same concept I have worked on creating a reusable Power App Component which is configurable in a way that it can be directly used in-app by just passing certain parameters. If are new to the component concept in PowerApps, you can refer to my article at this link which will give you an understanding of components in Power Apps

In this article, we will see the usage of this reusable component which can be downloaded from here.

https://github.com/siddharth-vaghasia/public-docs/blob/master/powerapps/components/CustomFontLibrary.msapp

Step - Import the component in your environment 

The first thing we will have to do is import this component into your environment once so it can be used in multiple apps.

Create a new canvas app (Canvas app from blank)

Provide the app name of your preference. I am using “Temp” as this name would be changed to the name of the component library after we import it. Click on Create

Once the blank app is loaded, click on File -> Open -> Browse and upload “Custom Font Library.msapp“ that we have downloaded from the previous step and click on open.

This will open a popup confirmation for you to save changes. Note that you need to click on Don’t save. This will open the component library.

Now we will save this component to the component library... 

Click on File -> Save and save to cloud. You can change the name, but I will prefer that you keep the name as it is. Now you can close the app. 

Now let us check if this component is available .... Click Apps -> Component library section

we will find a new library that we have just imported. If you see something like below, it means import is successful. and we can now use this component in any app developed in this environment.

Step - Using the imported component in Power Apps App

You can either create a new canvas app or use this component in the existing app.

Once you are in edit mode of any app. Choose the targeted screen where you want to add an icon. 

Click on Insert Pane and at the bottom, you will find a link Get more components to click on it

This will open the popup on the right side as in the screenshot below. Select Custom Font Library -> Font Awesome and Import

Once we import this component we can see a new option visible under Insert Pane named Library Components. (screenshot below).

To add a component to the screen, click on FontAwesome Control. You will find a default save icon that will be inserted on the screen as in the below screen.

We have set its properties and customize them based on our requirements. The below table has an explanation of what are the properties and their purpose.

Properties

#	Property Name	Sample Value	Description
1	Icon Name	save	Name of the icon you want to set, this icon should match with the name as in font awesome icon library Please check Cheat Sheet: https://fontawesome.com/icons?d=gallery&s=regular&m=free
2	Icon Color	Red rgba(255,0,0,0) rgb(255,0,0) #8844aa	You can set color as name, rgb, rgba, hexa etc.
3	Icon X	Numeric value Default : 15	To adjust horizontal alignment. In most cases, you do not need to adjust but some fonts may be required to be set.
4	Icon Y	Numeric value Default: 80	To adjust vertical-align. In most cases, you do not need to adjust but some fonts may be required to be set.

Below are some icons for reference which I have added on a screen to understand its usage. Please note that for each icon you will have to drag/add new Font Awesome icon component and set its properties.

For my testing purpose to check whether this component works with every icon and property, I have created a screen that passes dynamic values to these properties based on user input, please note that this is just to demonstrate the usage of components. In a real-world scenario, icons would be mostly used along with buttons, rectangles, or labels ..... so these properties would be manually set using the developer during design time according to his requirements.

Hope this helps, happy low coding...!!! :)