Let me answer your questions directly:
1. Are there additional icon packs by Microsoft that I can import? If yes, do they behave the same with the Icons available in PowerApps?
No, you cannot import icons to Power Apps.
2. Is there are no icon packs by Microsoft, is it possible/worth using custom icons, and how can I import them?
a. Considerations: Icon color may not be changeable/clickable.
It is not possible to add icons to either the Icons list under the Insert menu item, or to the icon property panel used by the icon and button controls.
It is, as several people have noted, to use small iconlike images in your app. SVG images are recommended because they are small and they look good at all sizes.
However, you cannot assign these using the icon property of any control.
If a "chair" image works for the OP, using the image control and an external SVG would be usable.
As mentioned, it's not possible to add an external image to a button. The image control has an "OnSelect" property, but the cursor does not change to the pointer on hover. It's possible to combine controls to mimic the look and functionality of a button. For example, a transparent button on top of an image provides the "OnSelect" and cursor change. If you need a tooltip on hover, use the Classic button control.
If the image/button combination is going to be used often, I recommend creating a custom component.
In several of my solutions, I use external SVGs quite heavily. To make this easer, I created a table called "Source_Images". Source Images has two columns: Image_Name and SVG. The SVG column contains the raw SVG data. It is not formatted for use by Power Apps, i.e., it doesn't have the
"data:image/svg+xml;utf8," prefix. I did it this way because I also use this table to generate SVG files via Power Automate for other needs.
When I need an image, I do a LookUp on the table to get the SVG code, then concatenate the prefix and URL encoded (via EncodeURL()) SVG data.
To Illustrate, I have this "Add" image in my table:
|
Image Name
|
SVG
|
|
Add
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z" fill="#000000"/></svg>
|
This works well for generating images but will not work as the "Image" property. To get an image that Power Apps will display, we have to add the prefix and EncodeUrl the SVG. A formula to do this would look like:
Concatenate("data:image/svg+xml;utf8,",EncodeUrl(LookUp('Source_Images',Image_Name = "Add").SVG))
If desired, you could add a third column to Source_Images to hold the result of this formula and avoid the concatenation.
To change the color of the image, replace the 000000 in fill="#000000" with the desired hex color before encoding the SVG string.
I don't like having to do a database lookup every time I need an image, so I have a named formula in my app formulas that defines all the images that I intend to use in my app. I define and cache the images on app initiation so that they are all available.
If anyone wants the example code for how I define and cache images, let me know and I'll share it. I can also talk about creating custom components if desired.
FontAwesome provides the SVG for all their icons too at https://fontawesome.com
To change the color of the image, replace the 000000 in fill="#000000" with the desired hex color before encoding the SVG string.
Here's an example of an app that uses the database driven images on a page using custom components to build what I call "Story Buttons", e.g., "Create a new role". It's very simple,
The form to add a new role shows a more standard save button:
Thanks for reading this waaaaaayyy too long response!
