Custom SVG Icons using Formulas

[elseb]

If the default icon selection is not sufficient for your apps needs you can always use any image you choose and display it in [image] control, this can be all you need for the app.

However, this option has its limits, e.g. if you use uploaded image you can only use it in colour it came, there is not many options in terms of customization, and you will have to upload new edited image each time.

The same goes for the size, if you use .jpg or .png or other raster images you will have to make sure to upload good size image to maintain quality and that may end up being quite a large file.

There is a solution to expanding your icon selection, while keeping small file size, excellent scalability, and easy colour customization options thanks to one experimental feature of PowerApps!

Enter Formulas and UDFs.

To accomplish all I’ve mentioned we will need an icon of your choice but instead of uploading a raster file we will use an SVG code instead.

As an example, we will use this person icon:

The SVG code for this icon looks like this:

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="black" d="M12 6q-.825 0-1.412-.587T10 4q0-.825.588-1.412T12 2q.825 0 1.413.588T14 4q0 .825-.587 1.413T12 6M9 22V9H3V7h18v2h-6v13h-2v-6h-2v6z"/></svg>

To use it in powerapps we need to convert all the [“] into [‘] paste the code into notepad press CTRL+H and replace one symbol to the other.

Final step to make the code usable is to add the below code snippet:

"data&colon;image/svg+xml;utf8, "&EncodeUrl(" HERE_GOES_SVG_CODE ")

The final code should look like this:

"data&colon;image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='black' d='M12 6q-.825 0-1.412-.587T10 4q0-.825.588-1.412T12 2q.825 0 1.413.588T14 4q0 .825-.587 1.413T12 6M9 22V9H3V7h18v2h-6v13h-2v-6h-2v6z'/></svg>")

As you can see, I’ve marked a section of the code in both examples, those parts of the code are describing the colour, you will have to do some hunting on your own and locate which sections correspond to which colour of the SVG. Keep an eye on the next code snippet as it will show how to replace that hardcoded colour code with a parameter we will be able to change from within the app.

To make full use of PowerApps UDF functionality we will define those colours as parameters,

Syntax looks like this:

FunctionName(Parameter1:DataType1, Parameter2:DataType2):OutputDataType = Formula

• FunctionName – used to invoke the function
• Parameter – the name of the input. One or more inputs are allowed
• DataType – argument passed into the function must match this data type
• OutputDataType – output of the function will be in this data type
• Formula – the result of this formula is the output of the function

Following this instruction, we will define out icon:

ICNperson(colour:Text):Text = "data&colon;image/svg+xml;utf8, "&EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='"&colour&"' d='M12 6q-.825 0-1.412-.587T10 4q0-.825.588-1.412T12 2q.825 0 1.413.588T14 4q0 .825-.587 1.413T12 6M9 22V9H3V7h18v2h-6v13h-2v-6h-2v6z'/></svg>");

I have replaced the colour originally set in SVG code with our preset parameter [colour] and wrapped it in [“& &”] to let PowerApps know this is part of our powerFx code and not the SVG.

Our icon is now ready to use, the only thing remaining is to call the code from the image control in our app to do this we will follow those steps:

• Place image control in your app.
• In the Image property of the image control, we will put: ICNperson("green")
• Which should result in the icon below:
  

Now to change to colour of the icon we can put a hex code or the name of the colour between the quotation marks.

That is all!

And for more complicated example here’s a multicolour ice cream icon 😊

FORMULA:

ICNicecream(topcolour:Text,midcolour:Text,bottomcolour:Text):Text = ("data&colon;image/svg+xml;utf8, "&EncodeUrl(" <svg xmlns='http://www.w3.org/2000/svg' width='0.48em' height='1em' viewBox='0 0 256 540'><defs><path id='logosCrossplaneIcon0' d='M.137 122.022c-.18 4.155-.172 8.316.027 12.47C.11 135.557 0 136.61 0 137.69v210.042c0 40.169 32.785 73.036 72.858 73.036h109.65c40.058 0 72.857-32.867 72.857-73.036V137.691c0-1.23-.136-2.407-.191-3.61c.199-4.017.204-8.041.014-12.059C252.098 54.1 196.179 0 127.669 0C59.145 0 3.227 54.1.137 122.009z'/></defs><path fill='#F7D186' d='M126.759 173.662c-17.689.03-32.008 14.386-31.993 32.074v301.878a32.034 32.034 0 0 0 31.993 32.074c17.678 0 32.006-14.356 32.006-32.074V205.736c.015-17.688-14.304-32.044-31.993-32.074'/><path fill='#FF9234' d='M255.18 134.095c.185-4.018.185-8.041 0-12.059C252.117 54.114 196.199 0 127.675 0S3.232 54.114.142 122.036a130.29 130.29 0 0 0 .014 12.469c-.04 1.066-.15 2.12-.15 3.2v210.042c0 40.168 32.785 73.036 72.858 73.036h109.65c40.058 0 72.843-32.868 72.843-73.036V137.704c0-1.23-.123-2.406-.177-3.61'/><g transform='translate(.635 .014)'><mask id='logosCrossplaneIcon1' fill='#fff'><use href='#logosCrossplaneIcon0'/></mask><path fill='"&midcolour&"' d='M331.874 126.028L15.19 443.465l-93.79-94.023L238.07 32.006z' mask='url(#logosCrossplaneIcon1)'/></g><g transform='translate(.635 .014)'><mask id='logosCrossplaneIcon2' fill='#fff'><use href='#logosCrossplaneIcon0'/></mask><path fill='"&topcolour&"' d='m237.783 31.705l-316.67 317.437l-116.704-116.992L121.052-85.286z' mask='url(#logosCrossplaneIcon2)'/></g><g transform='translate(.635 .014)'><mask id='logosCrossplaneIcon3' fill='#fff'><use href='#logosCrossplaneIcon0'/></mask><path fill='"&bottomcolour&"' d='m425.964 220.351l-316.67 317.423l-93.79-94.022l316.671-317.423z' mask='url(#logosCrossplaneIcon3)'/></g><path fill='#D8AE64' d='m103.448 421.138l55.508 55.645v-56.11z'/></svg>"));

IMAGE PROPERTY:

ICNicecream("indianred","skyblue","orange")

RESULT:

Hope you will have fun making your app pretty with all the colourful icons! 🙂

Seb

*Syntax description is a snippet from the following blog:
Power Apps User Defined Functions: Write Code Once And Reuse (matthewdevaney.com)