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.
![](https://i0.wp.com/365lyf.com/wp-content/uploads/2019/07/search.png?resize=300%2C198)
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.
![](https://i0.wp.com/365lyf.com/wp-content/uploads/2019/07/1.png?resize=676%2C31)
2) Then within my typescript init class I added the following to HTML to my button elements.
![](https://i0.wp.com/365lyf.com/wp-content/uploads/2019/07/2.png?resize=676%2C136)
The end result looked something along the lines of the following example:
![](https://i0.wp.com/365lyf.com/wp-content/uploads/2019/07/Embed_Icons_Buttons.png?resize=300%2C280)
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.