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

It has been noted that a few people in the community have been having issues using internal resources such as images within their custom PCF controls, so I thought I would look at another approach.

If you aren’t familiar with font-awesome they allow you to choose from a catalog of great looking icons that you can then use within your web apps.

In the following example, I created three buttons that then had their own font-awesome icons. This was achieved by doing two things:

1. Using an import statement within my css, I then referenced the font-awesome css file.
   
   @import “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css”;
2. Then within my typescript init class I added the following to HTML to my button elements.
   
   this._blueButton.innerHTML = “<span class=’fas fa-microphone-alt’></span> Start Recording”;

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 over at GitHub.

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

Credits:

• Shout out to Mo Mostafa MVP for the challenge.