So we can edit our SVG string to add fill='white' (or a HEX or RGBA value that matches your background which is white in my case). The icon is showing, wowee! Now we need to make that fill match the background (the black stuff shown above). So connect the text above with an & and enclose the SVG text (copied from notepad) in double quotes inside of the EncodeUrl function (don’t forget your closing double quote and parenthesis):

To do that we need to add the EncodeUrl function. This will let us use the SVG text directly. The first bit of text is just a string: 'data:image/svg+xml utf8, ' In the Image property we’re going to replace SampleImage with some text. So, let’s add an Image control to your App. Use Your Icon in Power AppsĪlthough we can add an SVG file as media and use it that way, I like to have a little more control.

Let’s do a find for double quotes and replace them all with single quotes. You should see some XML with a viewBox attribute and one or more paths. Let’s open up our SVG file using a text editor like Notepad. In the dialog that pops up, here are the options I’ve chosen with the goal of reducing SVG complexity/length: So let’s Save as ( File > Save As…) and change the type to Optimized SVG. Although we can use the default format, there’s a lot of extra stuff added that we don’t need. In the Custom Size options group, expand the Resize page to content section and click Resize page to drawing or selection. To fix it, however, go to Document Properties ( File > Document Properties). This is because our icon wasn’t perfectly centered before. You’ll notice we’ve got an extra space around the icon and the document size (seen as a black square above). You can mess around with colors if you’d like, but it isn’t really necessary for what we’re doing.

Once you’ve got an icon in mind, hover over it and switch to the Export tab. If you haven’t used Flicon.io before, just search for an icon you want to use or browse with the categories. However, I recommend using the Fluent Icons provided by Microsoft since that’s what’s being used everywhere else. Get an SVG Iconįirst step, get your icon! Font Awesome and the Noun Project both provide all of their icons in SVG format.

These steps could be adapted to work with a PNG image, but SVG is very common among icon sets and provides a better result overall. What if you want more than just a changing background or border? You know, like how the icons themselves work in Power Apps? For this, we’ll need a custom icon as an SVG. Use images but be satisfied with Border or Fill effects PITA Solution That Works I’ve included both, but I definitely think the PITA Solution is the way to go until Microsoft figures out something better. Fortunately, that’s Easiest Solutionīut what if you don’t want to use one of the very few icons they’ve provided? What if you found Flicon and would like your app to match the rest of Office 365 and use the Fluent / UI Fabric icons? Or perhaps Font Awesome or the Noun Project or something your kid drew?įortunately, there are still options! There is a pretty easy option laid out in the OKish Solution below and then a PITA Solution that works but there are several steps involved. So if you are making anything of any complexity you’ve likely already run out. But… there are only 106 across 4 categories which isn’t a whole lot when it comes to icons. Using icons for buttons is a very common scenario in Power Apps and Microsoft has provided the Icon control to accomplish just that.

Lightgallery hover