Use Rich icons in Power Apps

In this blog, I’ll show you how you can use rich icons in Power Apps that will not only make your app look better but also will not impact your app’s performance. We’ll know the use of Scalable Vector Graphics (SVG).

After completing this article, you will understand –

• Why should we use these icons in Power Apps?
• Where to find these icons?
• How to use these icons?
• Use cases of Rich Icons.

Why should we use these icons in Power Apps?

Scalability: The SVG images are resolution independent and can be scaled to any dimension without losing their quality. On other hand, other pictures like jpg, png, etc. lose their resolution when enlarged because their small pixels are forced to expand beyond their original size.

Feasible Editing: SVG images are very easy to edit. It’s some code that you need to change using any code editor whether you want to change the color of the icon or the background as per your app’s theme. There is popular graphics editing software available where you can edit an SVG file.

File Size: Pixels-based image size varies from small to large based on use and that can cause performance issues in the application while loading any screen. Since SVGs are scalable so they can be saved at a minimal file size.

Where to find these icons?

The most popular SVG icon/files sites are:

• Bootstrap
• Font Awesome
• Material Design
• Fluent UI

How to use these icons?

For Demo, we will use the Bootstrap icon sets –

1. Go to https://icons.getbootstrap.com/ and select any SVG icon that you want to use in your app. E.g. I am selecting the info fill icon.

2. Copy the SVG HTML code

3. Paste the code in VS Code or any code editor.

4. Replace all the double quotes (“) with a single quote (‘). Following will be the SVG that we will use in power apps –

5. Now, in the above SVG code, you can see various properties like height, width, and You can adjust height and width as per your need. And if you want to change the icon color you can use the HEX color code in the fill property and remove the currentColor which is by default. For e.g., Fill = ‘#0392d1’

6. After all these changes now our SVG code is ready to use in our app. Head back to the Power Apps canvas app screen where you want to add the icon and follow the below steps –

1. 1. Add an image control in the app.
   2. In the image property of the image control add the file type prefix “data:image/svg+xml;utf8,”
   3. Paste your SVG code inside EncodeUrl Function and concatenate it with the previous file type string.
   4. The complete code will look like this –

"data:image/svg+xml;utf8," & EncodeUrl("

")

Output Image

Note: You can get SVG code from a SVG file by opening it in a notepad or any text/code editor.

Use cases of Rich Icons

There are the following ways we can use these icons –

 1. Clickable Icons: To make any icon clickable and show a hand whenever the user hovers on it like a button. We just have to add a button above the icon with the following properties –

Height: Same as the image control’s height
Width: Same as the image control’s width
Fill: RGBA(0,0,0,0)
HoverFill: RGBA(149,149,149,0.2)
PressedFill: RGBA(149,149,149,0.4)
BorderRadius: As per icon shape.

Output:

 2. Gradient Icon: To make any icon gradient we need to add some extra lines of codes inside the SVG tag. Following are the steps to create a gradient fill-in SVG icon –

1. 1. Go to https://angrytools.com/gradient/ and select the SVG option. On this site, you can generate the gradient color by entering the color hex code, selecting the start-stop position, select Linear, Radical, or Elliptical.
   2. Now you have to copy the line of code that starts with and ends with and paste the copied code before the
   3. Now our gradient properties are available, all we need to do is to link it with the icon’s fill Change the fill property to the following –

fill=’url(#lgrad)’

Here, lgrad is the id of the defs tag so whatever your defs tag has you have to use the same.

The final SVG code will look like the below –

Output:

Well, this is the end of this post. Using the above trick, you can enhance your Power Apps UI with a bunch of rich icons.

Let me know if you have any queries or suggestions in the comment below. I will see you next time, till then, Happy Learning!

=====

Plus read

Two Level Left Navigation Component