Breaking news from around the world
Get the Bing + MSN extension
Now Available in Community - MBAS 2019 Presentation Videos
Catch the most popular sessions on demand and learn how Dynamics 365, Power BI, PowerApps, Microsoft Flow, and Excel are powering major transformations around the globe. | View Gallery
2019 release wave 2 Discover the latest updates to Dynamics 365Release overview guides and videos Release Plan | Early Access Availability
Ace your Dynamics 365 deployment with packaged services delivered by expert consultants. | Explore service offerings
Connect with the ISV success team on the latest roadmap, developer tool for AppSource certification, and ISV community engagements | ISV self-service portal
The FastTrack program is designed to help you accelerate your Dynamics 365 deployment with confidence.
FastTrack Program | Finance TechTalks | Customer Engagement TechTalks | Talent TechTalks | Upcoming TechTalks
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!
Business Applications communities