Office UI Fabric Icon Generator 04-29-2020 19:13 PM - last edited 04-29-2020 19:15 PM

[R3dKap]

[13-mar-2022] Update v2.0

• Added latest official icons -> now 2254 icons available!
• Application direct download below (instead of ZIPped component MSAPP file)

This application will allow you to generate the SVG code for any of the official Office UI Fabric Icons library. You will then be able to use that SVG code as the Image property of an Image control in your application.

All details and important notes about how to use the component can be found here: OfficeUIFabricIconGenerator.

I hope you will enjoy this component and that you will find it usefull. If it does, please consider giving it a thumbs up.

Emmanuel (@R3dKap)

INSTALLATION instructions

• Download the ZIP file below
• Go to make.powerapps.com on your tenant
• Import the application
• Play the app, choose your icon, get the icon code and paste it in an image control in the app your are developing
• DO NOT IMPORT the component itself to the app your are developing as it holds thousands of icon SVG data!

[kriggo15]

Hey @R3dKap, I was coming at it from the point of view that I would like to share it with a few colleagues so they could just interact with it and grab the icon code they want and paste it in their app. I thought this would be easier than adding them all as a co-owner on the app or then having to have their own copy of the component.

So, basically they would use the app in a browser, find the image, make whatever color changes they wanted, then copy the code and paste it as an image in their app, all without having to have the component embedded in their app at all.

[R3dKap]

Oh, ok I see... Let me check if I can figure out something for that particular need...

[R3dKap]

Ok... What you can do is this:

Screen1.OnVisible = Set(locInitialize, false); Set(locInitialize, true)
OfficeUIFabricIconGenerator.Initialize = locInitialize

Just tested it on my side and it works. There is just a small visual issue where the links to the official page and to my twitter account doesn't show up in the right place:

But hey, who cares... 😉

[kriggo15]

I'm doing something wrong on my side it looks like. I had to use cmpOfficeUIFabrocIconGenerator.Initialize instead of OfficeUIFabrocIconGenerator.Initialize. I'm still getting the same view of a blank gallery after publishing and viewing it on a mobile device.

Screen1.OnVisible Value:

[R3dKap]

Thanks for the capture. That's how I identified your issue.

In my previous post, the two lines of code were refering to two diffent things...

On your Screen1 object, set its OnVisible property to:

Set(locInitialize, false); Set(locInitialize, true)

Then, on your OfficeUIFabricGenerator component, set its Initialize property to:

locInitialize

Sorry if it wasn't clear enough the first time... 

[kriggo15]

@R3dKap  Works perfect. Thanks for your help!

[RobertHoegnerFC]

awesome solution! i would love to have the possibility to download the svg's  created from the application

[R3dKap]

@RobertHoegnerFC, you mean download the generated SVG into a file ?

Cause the main goal here is to generated the SVG so you can integrate it directly in a Power Apps app by pasting it in the Image property of an image control.

But then, I mean, why not... Maybe if you can, then, post a request on Github for this feature: https://github.com/e-gallis/PowerApps/issues.

[JRRRS]

**edit** Disregard lol, would help if I read the GitHub instructions first 🙂

I try to run but I get a warning about manipulating collection data. I don't use PowerApps much and am unsure how to remedy.

Am I missing something super obvious or did MS change something that broke your app recently?

screenshot of warning

[R3dKap]

Hi @JRRRS,

This warning is there because I use collections inside the component to store the whole list of icons. It is not forbidden to do so but one should not do so because as a collection is global it is also accessible outside the component. Seeing a collection in an app that was declared inside a component can be a bit disturbing as all that's inside a component should remain so (that's what the error message's description says).

Anyway... It has absolutely no impact on the use of the component, nor on your app. And by the way, remember to remove the component from your app once your app is done.

On my side, I don't even put the component inside the apps I build: I created a dedicated app with that component only just for the purpose of generating icons.

Hope this helps...

R3dKap