#PowerHackđź 1 - A quick & dirty way to get 100âs more icons in your app (NOT SVGâs!)
Welcome to another series on my blog! You may have seen some of my tweets and posts on LinkedIn sharing some hacks and tricks that I discover while pushing the boundaries of the art of the possible. I thought it would be a great idea to have another series alongside my other two series - UI/UX and #PowerFixđ . Because if thereâs another way to do something.. why not do it?! #hacktheplanet continues đ
For my first episode, Iâve chosen something incredibly simple, yet I havenât seen it used anywhere - a fourth way to get icons in Power Apps.
If youâve worked with Canvas Apps, youâll know that we currently have three options when it comes to icons:
out-of-the-box icons that come in the App Maker studio - they are great, but the options are limited,
icons uploaded as images - my least favourite option, as they are static and you cannot change their colours,
SVGâs - my FAVOURITE option if you havenât guessed already. They open another world of possibilities in Canvas Apps with animation, lineal gradients, glowing effects and so much more.
So whatâs the fourth option you may ask?! Well⊠emojis. Not exactly emojis, but built using the same framework. Unicode characters (icons). They are basically symbols. So what do they look like?
â« â â â© â â âș ⥠â đïž â â
If you hover over one of those, youâll notice that it is not a picture. You can select each one and copy them and paste them anywhere. Cool, right?!
Because unicode icons are recognised as text characters, they work just like text does. Letâs dive into an example in a Power App so you can see the real benefits!
Firstly, letâs add a label to our screens.
For todayâs demo, Iâll be using CoolSymbol website as Iâve found it to be the best. Select any of the icons you like - please only use the black icons. Although the colourful ones/emojis will also work, they are not as flexible as the black ones! For our demo, Iâm choosing an envelope (â).
When you click on the icon, it will automatically copy it to your clipboard. All you have to do now is go back to your app, double click on the label to start typing (or use the pane on the right) and press Ctrl + V. THATâS IT!!
I know what youâre thinking.. âKristine, why?!?!â. OK, let me show you a simple trick! Letâs add some text to our label.
And hereâs the trick⊠change the colour of your label to any colour you like. What happens next?! BOTH the text and the icon change colour simultaneouslyđ€©
Very effective, right?! You can use them in any control in your Power App - buttons, galleries, HTML control, dropdowns - the options are unlimited. They will get bigger as you change the size of your text too!
Simple, but so effective! Letâs recap the benefits:
Automatically inherit colours and size of the text = less PowerFX and less maintenance,
Reduce the amount of controls - rather than use a control and an icon, you can have the same experience with just one control,
Unicode characters are extremely lightweight - over a 100 of unicode symbols is still less than 1kb.
They are just SUPER QUICK to implement!
Hope you enjoyed the first episode of my hack series. Donât forget to subscribe if youâd like to receive updates on new blog posts!
đ