Personalizing Custom Entity Icons with Metro Studio
In Dynamics 365, an administrator can customize the icons that are displayed for custom entities. These entities will display an unattractive default image in the navigation panel, as well as a miniature unattractive default image in certain places like the configuration area.
Have a look:
To address this, we need to collect custom icons for all our custom entities. A great tool to make this quick and easy is Metro Studio 5 by Syncfusion. You can search for this program and download a desktop version, which we find to be the most convenient. The interface allows you to instantly search thousands of flat pre-configured icons for download. It even gives you preset icon categories to quickly find icons that apply to your vertical.
Further, if you ever need to make bulk changes to your icon configurations, Metro Studio will store them in ‘projects’ that allow you to return later and re-export, make changes, etc. Just drag an icon to create a new project, then add to that folder the additional icons you will need for your project.
You can see we’ve added three icons to the project below:
We can now bulk edit those three icons to meet the standards we need for them to cooperate in D365.
First select all custom icons (as indicated by the check marks). Then create the 32×32 icons first by dragging the first size slider to 32. Now set to 1 using the next slider (you can experiment with your preferred padding for your project). Set the background color to ‘transparent’ – that way, we can control the background color in D365 and won’t be limited to the single color we are exporting. Lastly, choose the icon color. OB icon color for 32×32 is white (#FFFFFFFF). See below for an exam of these customizations applied in bulk to the custom icons:
Now we can export these as .png files to our local machine. Then repeat the above steps to create our 16 x 16 icons. However, for these, set the slider size to 16, set the padding to 0, leave the background transparent, and set the color to a black or grey of your choice (we use the OOB gray, FF5E5E5E). Export these, as well, and keep track of them.
Note: You can also rename the icons here. It may help to have a logical name when you import them as web resources. For example, “samplecustomicon16” or “samplecustomicon32.”
Now, for the easy part that most of you are familiar with. We will update the old standard icon in D365 and replace it with our new awesome icon. First, load the new icons into CRM as web resources.
Go to Web Resource > New in the configurator.
Follow the settings below, then repeat this process for the 16×16 icons:
Note: Be descriptive with a 16 or 32 in your naming convention so they are easy to locate later.
Now, with all your icons added as web resources, in the D365 configurator locate and select the entity for which you wish to update icons.
In the toolbar at the top of the entity, select Update Icons.
You can now lookup your 16- and 32-sized custom icons and associate them with the custom entity.
Once you’ve saved and published, you can see that the new icons are in place!
Easy, awesome, and even a little fun. Get more Dynamics 365 tips and tricks on our blog!
Happy Dynamics 365’ing!