Office UI Fabric Icon Generator 05-07-2020 18:57 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!

[Anonymous]

Good stuff

[DavesTechTips]

Absolutely top stuff @R3dKap, thank you, it works great!

One note, the current zip file in the post doesn't want to import for some reason. I tried to download it again, but the same results. The msapp I grabbed from Github works great though.

[R3dKap]

Hi @DavesTechTips, glad you like it! 😊

About the ZIP file, it's because the ZIP file contains the MSAPP file. You have to unzip it yourself and then import the MSAPP file as a new component. I had a problem the day I published the component: I couldn't publish the MSAPP file directly with the post. That's why I packaged it in a ZIP file. But I'll try again to put the MSAPP file directly in the post again...

[schuess3]

Hey @R3dKap ,

Is there a way to dynamically change colors of the icons in the App like with the OOTB icons? Have you heard or seen anyone doing that? To me it seems like the big reason to push for more OOTB icons. 

BTW.. Your Component is awesome !

Thanks

Matt

[R3dKap]

Hi @schuess3,

Thanks... 😊

Yes, of course it's possible and, in fact, it's pretty easy. Have a close look at the SVG code you paste in your image control and you'll see a fill property for the icon:

Between the 2 quotes, just insert a piece of code to define your icon's color:

The only important thing to know is that the color must be a string in the HTML format: #rrggbbaa. As you can see, the last two letters "aa" indicate that you can even set the alpha component of the color, meaning you can set a transparency value.

Enjoy!

[Tolo]

Hi,

Really very good work.

Thanks a lot.

[Aniruddha]

Hi,

It is a fantastic app! Till last week the was working fine but now only one icon is visible. Did anything have changed?

[R3dKap]

Hi @Aniruddha,

Thanks... You're absolutely right! I just tested it on my side and indeed only one icon shows up.

I'm debugging this right now... I'll let you know when it's fixed...

[max81]

@R3dKap : will there be an update with the new Power Platform logos? 😬

How ever: I still love it and use it! 🙂 💐

[R3dKap]

Following your reply I went to the official UI Fabric icons site and noticed that there were indeed many new icons. I'll add them to my component in the coming weeks. I also plan to make a version 2 of the component where not only will it generate the SVG for an icon but also will allow one to build a set of icons for an app and generate the code to declare these icons inside the OnStart event of the app. This technique will make it more easy to use the icons inside one's app...

Just a bit more patience... 😊