Web part icons help you to distinguish your web part between all the others.
SharePoint Framework provides use two options at this moment of specifying an icon:
- Office UI Fabric font icons (officeFabricIconFontName)
- Images by providing a URL (iconImageUrl)
Info: Waldek Mastykarz wrote a great article about this a while ago. Read more about it here: Specifying the icon of a SharePoint Framework Client-Side Web Part.
Probably, when you are creating web parts for a certain product or company you want to include the logo instead of using the Office UI Fabric font. You could do this by uploading your image and adding the URL of the image to the iconImageUrl property.
But did you know that you can also make use of Base64 encoded images?
Base64 what?
Instead of specifying an URL to an image to load, you can encode your image. That way you do not have to upload your image to an online location, and there is no extra request necessary to retrieve the image.
For example, this image:
Becomes this:
The great thing about it is that you can maintain everything in one location and do not have to worry about where you are going to store the icon images.
How to convert your image
There are a lot of online converters, one that I use frequently is https://www.base64-image.de/.
On that website you upload the image, the website encodes it and provides you with a couple of options. The one you need to be used in the web part manifest is the copy image option.
Once copied, add it to the iconImageUrl property and you are all set to go.
