How to Create Buttons with Icons within PCF (using Font-Awesome)

I’ve noticed that people in the PowerApps community have been having trouble using image resources within their custom PCF controls, so I thought I would look at a simple but novel approach for customizing your buttons and icons.

If you aren’t familiar with font-awesome they let you search from a catalog of great looking icons that you embed within your web apps.

In the following example, I created three buttons which have their own font-awesome icons. This was achieved by doing two things

1) Using an import statement within my css file. I then referenced the font-awesome css file.

2) Then within my typescript init class I added the following to HTML to my button elements.

The end result looked something along the lines of the following example:

If you would like to test this solution out, you can find the source code and test solution file over at GitHub.

https://github.com/365lyf/PCFControls/tree/master/ButtonIconExample

Credits:

  • Shout out to Mo Mostafa MVP for the challenge.