Office UI Fabric Icon Generator 10-08-2020 12:43 PM - last edited 10-08-2020 12:43 PM

[R3dKap]

[19-nov-2019] Update to v1.1

• Added icons count right next to the search box
• Added icon names below icons
• Fixed number of icon columns showed when resizing component
• Added icon rotation
• Added icon color hint
• Replace icons scroll bar with paging buttons
• Fixed larger icons width

This component will allow you to generate the SVG code for any of the official Office UI Fabric icon. 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)

[AKB_2K]

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... 😊