How to Use Microsoft Unified Interface Icons in Power BI

As Power BI is used increasingly within model-driven apps and Microsoft Dynamics 365 apps such as Dynamics 365 Sales, attention to detail in the user experience is increasingly important. Users should be able to seamlessly navigate between the two technologies, and the visual cues should match between them for a coherent user experience.

Visual cues, for example, can be the icons used in the report to represent Opportunities, Accounts, Emails, Tasks, etc. In this blog post, I will show how to copy the icons from a model-driven Power App or Dynamics 365 and add them to a Power BI report.

The following image is the completed example of what I will create, a Power BI table with activities, using the icons from Power Apps.

Using the same icons makes it easier for the user to decode what they are seeing on the screen.

To create this, I will need to:

Get the SVG icons for the entities I need

Create a Power BI theme JSON file and import it to Power BI

Create a table which has the entity name in one of the columns

Set the icons to display instead of the entity name

Get the Icons

Finding the icons was a little tricky, but all you need for most icons is to type this URL in your browser.

https://YOURORG.crm.dynamics.com/_imgs/svg_1.svg

Replace YOURORG with your organization URL. The number 1 at the end is the entity number – it’s the Account entity in this case. Phone Call, for example, is 4210. Right click on the image to download the SVG file. Repeat that for all the entity icons you need and possibly use the XrmToolBox metadatabrowser to help you find the right numbers.

Create a Power BI Theme file

For complete details on theme files and icons check out this post from PowerBi.tips

Or just download the JSON theme file I have created with the most common entity icons here: Download Unified Interface Icons for Power BI Theme.

The theme includes icons for these entities:

Account

Activity

Appointment

Business Unit

Case/Incident

Competitor

Contact

Email

Invoice

Lead

Note

Opportunity

Order

Phone Call

Position

Queue

Quote

SharePoint Document

Social Profile

Task

Team

User

Add the theme file by clicking on View -> Themes -> Browser for themes and upload the file.

Query Table with Entity Name in one column

For my example, I queried a list of activities from CDS. In this case I used the Power Query builder and FetchXML. This method allows me to get the “regardingobject logical name” or the entity name. The standard CDS connector does not include this piece of information. The entity name is relevant as that is the column that will determine what icon to show.

To get the entity name of the regarding object, open the Expanded Column step and include the “lookuplogicalname” field for the regardingobjectid.

Click on Close and Apply to return to the report editor.

Add the columns to a table so it easy to see the values.

Columns with Activity Type and Regarding Object highlighted will be replaced by the matching icon.

How to add Icons

Select the table we just created and:

Go to the Layout tab and the Conditional formatting section

Select the Subject column

Click on Icons

Wait for the Advanced controls dialog to appear

Adjust the settings to look like this.

The field value selected in “Based on field” is what is being used to display the icon. In this case the field has values like “phonecall”, “task”, and “appointment”, and the theme file we uploaded has icons named “phonecall”, “task”, and “appointment”.

For comparison, you can open the JSON file in Notepad or similar and look at the descriptions of the icons, then add more icons if you like using the same format.

Repeat the process for adding an icon with the Regarding field, but this time select the Regarding Object field that we pulled in.

Now we can remove Activity Type and Regarding Object columns as they are no longer needed.

Finally, we can publish the report and add it to our Model-Driven Power App or Dynamics 365.

This concept can be taken further by including color codes for completed or high priority activities etc.

In my example I had the icon in the same column as the Subject and Regarding field, but you can include the type column separate and use the “Icon only” setting. That will include an extra column, but the standard tooltip will show you the name in case users are new and need to familiarize themselves with the icons.