A few weeks ago I wrote an article “Conditional Formatting Using Icons In Power BI” about the Power BI Icon feature released in July 2019.
There were 2 common questions/themes coming from readers’ comments, and I want to address those here.
Where can I find a list of Power BI Icon Names?
As I pointed out last time, it is possible to refer to the icons inside a measure by name.
Icon Set Measure =
SWITCH(
TRUE(),
[% Change vs Prior Year] < 0,
"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'
width='100' height='100' viewBox='0 0 100 100'>
<circle cx='50' cy='50' r='40' stroke='purple' stroke-width='4' fill='purple' /> </svg>",
[% Change vs Prior Year] < 0.4,
"StarMediumLight", "https://i.gifer.com/Omjx.gif"
)
In the measure above, note the reference to the standard icon “StarMediumLight”. The above switch measure will return
- An SVG icon if [% Chg vs Prior Year] is less than 0,
- The standard icon “StarMediumLight” if it is less than 0.4,
- Otherwise an animated gif file.
You can see the results below.
The benefit of this approach is you can leverage all the standard icons and then add you own icons as well, effectively extending the default icon set. But where can I find a list of all the names of the standard icons?
I asked this question in the Power BI Blog thread (as did some others). A list of names was provided by Francisco Mullor in the comment section of that blog post (sorry, I can’t seem to link to the exact comment). I have taken the information provided by Francisco and produced the following Power BI report.
You can download the list of names from within the report. I also created a shortcut URL to quickly return to the report if you want to https://xbi.com.au/icons
SVG Images Not Rendering at PowerBI.com
The other common issue I heard about what that sometimes the SVG code used to create an icon was not working when the workbook was published to PowerBI.com. The problem occurs because some browsers are not able to correctly interpret the hash # icon in the SVG code as shown below.
There is a simple fix – just replace the hash # character with %23 as follows:
In my testing, this fixes the problem.
Hi Matt,
Thanks for sharing.
Do you know where can I look for raw original icon sets in SVG?
I would like to create a blue flag based on the original Microsoft icon, but I can not find anywhere the raw description of flag icon…
So it wouldn’t be so simple to change the fill 😀
Sorry, no I don’t. There may be some online tool where you can draw one
Is it possible to use these names to create a legend or key when you use multiple icons in a table or matrix? I’m trying to figure a way to make a legend for icons without stitching together a graphics file.
Well, I guess you could load the icon codes into a table with a description in a second column. Then put both columns in a table visual for display purposes.
Hi Matt, is it possible to show an icon as table column name ?
I do not know of any way. You could try using the character map in Windows to cut and paste a character. I’m not sure if that would work.
Hi Matt, if i want no icon value in a metric? what I need to do? thks 🙂
Hi Matt, for example if i want a icon metric that return no icon, ¿what I need to do? this is my code
IconFormatting = SWITCH (
SELECTEDVALUE ( HeaderVentas[Columna] );
“Desv”;var desv=[DesvDia] RETURN IF(desv<0.97; "data:image/svg+xml;utf8, “;BLANK());BLANK())
BLANK() doesnto work Thks 🙂
Good question – I don’t know. You will have to test some options. Maybe try one of the svg patterns above with a transparent colour, eg #FFFFFF00
Thanks a lot! very useful resource!
Hi Matt,
I am not able to see the custom icons in IE11. I am using base64 code in json file. Is there any way i can change the code like in SVG # with %23.
Sorry, I am not sure apart from what I have posted above. Or try another browser
Excellent — thanks very much for the handy resource!
Thanks. A quick question if I may … icon 11 and icon 21, CircleHalf, appear to be the same. Is that correct?
Good catch – you are right. I found the issue and fixed it. It is correct now.
Thanks Matt and Francisco for the list very helpful.
These animated icons will add some wow factor to some of my tables. Great article, thanks Matt.
Thanks for the mention Matt.
I simply explored the existing code in the pbix layout file and there I found the answer