Office UI Fabric Icon Generator 12-03-2019 02:46 AM - last edited 12-03-2019 02:49 AM

[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)

[R3dKap]

Just so you guys/girls know, you can of enter in the Icon color text input box a color name (like "red" or "yellow"), or a value like "rgb(rr,gg,bb,aa)" or "#rrggbbaa" (with the alpha value). All these work as well... 😉

[R3dKap]

Hi all,

Just updated the component to v1.1 with the following new features:

• 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

Hope you'll enjoy all these new features.

Emmanuel (@R3dKap)

[luuminhvuong93]

Such a great work...hope this one gets updated regularly,

Normally I go to flaticon or user powerpoint icon to save as SVG and then open them in wordpad ,and then copy to Powerapps...

this saves lots of time !

[R3dKap]

Gald it helps @luuminhvuong93. About the regular update, I asked the team managing the list of icons if they could keep me informed of any modifications but I haven't had any feedback yet.

[NewcombR]

Do the icons have a transparent background fill?

[R3dKap]

Hi @NewcombR,

The background color of the icon can be defined throught the Fill property of the image control.

Emmanuel

[TxH]

Thanks for sharing your great component - it helps a lot. 

[kriggo15]

I really like this component. I'm still playing around with it and made a few customizations for adding my company's color palette.

However, I'm running into an issue when I publish and share the app. When Editing the app, everything works well. When playing the app, we all get an error that we need to initialize the component. I've tried publishing with Initialize set to both true and false, added a button to set OfficeUIFabricIconGenerator.Initialize=true, and have set the AppStart OnStart and Screen OnVisible properties to OfficeUIFabricIconGenerator.Initialize=true. None of these seem to work.

[R3dKap]

Hi @kriggo15,

The component is not supposed to be part of your application once you decide to publish and share it. It should stay in your app only for design purposes. That's why I recommend to remove it once your publish your app. Then, if your need to update your app, just re-insert the component on an extra screen and use it. And then, again, remove it when your publish and share.

Removing it before publishing your app also allows it to be lighter (since the component holds more than 1,800 svg data for all the icons).

I'll check it out though to see if I can do something to fix this issue if you absolutely want to keep it in your app.