If you’ve had a chance to play around with the new release of Dynamics 365 and dove into the new Unified Interface, you might’ve noticed that custom icons (whether entity or ribbon buttons) are all defaulted to a puzzle piece. This is due to a new Vector image format (SVG) that D365 supports in the latest release. The standard web interface will use the old image formats and Unified Interface will only use the SVG format so you will need to provide icons in both image formats if you plan on using the Unified Interface.
So how do we update our icons? First, create a web resource like normal and you will notice a new Type of Vector format (SVG). Select this and upload your SVG icon.
If you’re wondering how to create an SVG icon, I highly recommend SyncFusion’s Metro Studio app. There is a lot of great icons and you can easily edit them to how D365 expects and export them to many different formats.
In Metro Studio, find an icon you like and set the Height and Width to 32px with a padding of 0px. Select the transparent Background Shape (checkered box on the far right). For entity icons you will want to have an Icon Color of black (#FF000000) and D365 will automatically set the color to how it should be. I have noticed however that currently ribbon button icons will not automatically set the color so you should set the Icon Color to white (#FFFFFFFF) for ribbon icons.
Once you have the right settings, click Export and select Scalable Vector Graphics (*.svg) as the Save as type.
Now that you have your SVG icon uploaded as a web resource, head to your Entity customization and select “Update Icons” at the top. You will be able to upload entity icons like normal but there will now be a second tab called “Unified Interface” where you can select your new SVG icon.
Now we can check out our new icon in the Unified Interface. Use the App selector to navigate to an app where Unified Interface is enabled.
Now your custom entity icon will display correctly instead of using the default puzzle piece icon.
With custom ribbon buttons, as stated earlier, currently D365 does not automatically change the foreground color so we need to set it to white to be consistent with the native UI. Using the wonderful Ribbon Workbench, just set the ModernImage property of your button to your new SVG web resource.
Our new SVG icon in the Unified Interface:
Now your icons are all set in both the Web and Unified Interface!