hey power appers my name is Robin and today I'm trying to help you make your apps a little bit more beautiful in the background you can see the component library and template that Louisa and me created for you to use and until modern controls are fully there probably takes a few more months this will be the template that I start every new power apps canvas app from it is absolutely absolutely free to use and in description you find the link to the GitHub repository to download this there's also documentation to get started but today I want to talk about some techniques I used in that uh template and component Library um which makes it a lot easier to work with SVG icons because um as you can see right now when I click on different color schemes in here the SVG icons I used here also change the color um without you having to do anything and it probably works a little bit different than you might expect because we try to keep it as simple as possible for you to use these SVG icons for example um you see the GitHub logo up here this is this icon and there is no color property anywhere in that code but but still if we change those here um yeah it changes its colors and I want to show you how the normal method to uh use color in your icons and svgs works and how the method works that we used in here first of all we need icons and the icons uh that are in here you can find on a website called pictogram.svg there plus uh many many more that were created by users but this technique works with yeah every SVG icon you can think of so you can use the fluent icons you can use Font awesome icons and so on and so on so we're going to look for an icon so let's use this cool icon with the Cowboy head here and we can download the SVG code here and then we need a editor so we don't need that we will uh so this is the code of our SVG icon and if we want to bring that to power apps we need to exchange all the double quotes for single quotes So This what I did here with controll h and then just replace it and I'm going to copy that code and you probably know the technique to bring SVG icons into your um yeah into image controls so let's uh look for an image control and then we need some wrapper code so that we can just paste the SVG code in here and I have that in my clipboard at all times you see it's pinned to my clipboard so um if you use that code regularly I highly recommend doing that Louisa told me that you can do that so um and I've used it many many times so uh SVG code goes in here and the rapper code that we need is just this here and then don't forget uh this at the end and then we can just paste our SVG code in double quotes so just as a string in here and quick the reason why we needed to rep replace all the double quotes for single quotes because when it were double quotes then yeah the text would stop and uh yeah it for the code it doesn't matter if it's double or single quote so that's a quick way to do it and then we have our cool yeah Cowboy guy in here so now we want the color to match our color scheme and the thing that we can do um is we say fill equals and then we can use a color in here and what we want to do is we use the variable where the color is stored so uh it's stored in defaults dot primary color hex and as you can see we need the color as hex code so we don't need a normal power apps color but we need the color in HEX code and we calculate that color in our on start property so let's take a quick look in here so first of all we're going to set the color uh in here and this another cool trick uh that you can use I actually got it from Louisa she has a cre a blog post about that I going to link it in description um so we just define the color once and then we calculate the hex value of the color with this formula in here and then we got those uh this defaults do primary color hex variable so and now we match the color scheme in our app so but let's take a quick look here um here we don't need that so we're going to just bring our cool Cowboy guy up here so now it automatically matches the color of our scheme how does that work here I didn't do this little trick with Phill I did something else and let's look at the second method and this is especially helpful when we want to store our icons in just one place for example in a named formula in our app or on the on start property or somewhere I'm going to show you the name formulas oh I have actually icons in here so I'm going to use a third icon call it uh named formula Cowboy icon and then we're going to paste the code in here and don't forget this at the end otherwise it doesn't work and so we can now use use this ANF Cowboy icon instead of this code here and still have our Cowboy but now it's back to black so um how does that work now we can just use or I I show you let's take a quick look what we're going to do here so I want to replace that SVG string with this string right here I'm going to copy it really quickly and that's really simple because this SVG is um yeah it's it's only once in here so we just use the substitute function to substitute this uh this string with this whole string and then set the fill property for every uh for every element in this SVG um at the beginning and let me quickly show what I mean so we say substitute and then SG and uh no our icon and then SVG and we're going to substitute it with the thing I just copied and this should be it I somewhere made a small error in here oh yeah it's not substitute it's of course substitute uh and now we get to the same result and now we can really quickly exchange the icons so if I don't want the cowboy icon but the other ones that I stored for example the cash icon or the buck icon yeah then we can really quickly exchange our icons it's much easier this way to store icons and variables I hoped you like that little trick and if you didn't know our template and component Library please please give them a try and let me know what you think of it see you next time [Music]