How to add icons in text in SharePoint Online Communication site?

Question

I have a page in my communication site in which, I want to add my contact information.

I want to insert icons for it, which should appear before the text.

Example:

I want to add phone number icon and then type my phone number.

Similar to this one:

So how to insert icons with text in Modern Experience ?

Thank you !!

Answer 1

You cannot add icons directly in Text webpart. You may need to develop your own SPFx webpart.

You can use Office UI Fabric icons in SPFx webpart as stated in below official documentation by Microsoft:

Usage of the Office UI Fabric icons in SPFx components.

You can find the official documentation of SPFx on how to setup environment and how to build your SPFx webpart below:

Overview of the SharePoint Framework.

Answer 2

If you want to add custom icons in SPFX webparts then you can convert your image to base64 and set your image src with this base64 code. Like below

<img src='data:image/png;base64,iVB...' />

---

If the answer is helpful, please upvote and mark as accepted.

Answer 3

You can use html encoding of your icons which should work. All available HTML icons can be found here