SVG in Power BI Part 7 – Using a Theme File to add SVG Icons

Series

This is part of a series on using SVG in Power BI. The series supports my session at Power BI Days in Mechelen, Belgium in April 2019.

1. Introduction to SVG Basics
2. KPI Shapes in Power BI
3. Filling up with colour using SVG in Power BI
4. Using Text in SVG
5. Using SVG Rotate to create a dial in Power BI
6. SVG Icons in Conditional Formatting
7. Using a Theme to add SVG Icons
8. Feb 2023 Update - 5 SVG Stars

As part of the July 2019 update there were changes to conditional formatting and I covered the use of SVG based measures to add icons in part 6 of this series. In this post I am going to cover adding to or swapping the built in icons using a theme file and some SVG.

Overview of Theme Files

Theme files are a JSON file with instructions for formatting your visuals. The formatting can include colours, fonts and now icons. Details of how to construct and use a theme file can be found in the links below.

https://docs.microsoft.com/en-us/power-bi/desktop-report-themes

https://powerbi.tips/tools/report-theme-generator-v3/

Adding New SVG Icons

Icons is a new section for the theme file. It is at the same level as the name. You need a name, url and description for the icon. I can see no evidence of the name or description being used. Please correct me if I am wrong.

The url can be SVG code in a similar format to the measures from previous posts. So in this example my first icon is a red quarter of a circle. Below is the SVG code for the shape.

1

data:image/svg+xml;utf8, 

A simple theme file to create one extra icon would look like

1
2
3
4
5
6
7
8
9

{
    "name": "New Icons",
     "icons": {
          "complete025": {
               "url": "data:image/svg+xml;utf8, ",
               "description": "25% Complete"
          }
	}
}

This adds a single icon to the icons available in conditional formatting. It will be listed at the end of the icon list.

I then expanded the list of icons to cope with 25%, 50%, 75% and 100% going from red through amber to green.After applying the the theme to my report I created conditional formatting rules to a table to use my new icons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

{
     "name": "Percent Icons",
     "icons": {
          "complete025": {
               "url": "data:image/svg+xml;utf8, ",
               "description": "25% Complete"
          },
          "complete050": {
               "url": "data:image/svg+xml;utf8,  ",
               "description": "50% Complete"
          },
		  "complete075": {
				"url":"data:image/svg+xml;utf8,  ",
				"description":"75% Complete"
		  },
         "complete100": {
               "url": "data:image/svg+xml;utf8,  ",
               "description": "100% Complete"
         }
     }
}

Conclusion

Adding a few extra icons to report is great. I am concerned that adding lots of complex icons will just make the report slow.

In Microsoft’s announcement they say you can replace existing icons using a theme file. For this you need the resourceKey for the icons. I have not been able to find a list of icons and the example they give didn’t work for me.