Forum Discussion
How to add Custom icons for conditional formatting
Hi,
I struck with adding new icon set so that i can use them for conditional formatting,
i came across couple of resources where it is said that it can be achived by adding icons in theme file
https://exceleratorbi.com.au/conditional-formatting-using-icons-in-power-bi/ (By Matt Allington / July 19, 2019)
https://hatfullofdata.blog/svg-in-power-bi-part-7-using-theme-svg-icons/ (12TH OCTOBER 2019)
following the above weblink created icons theme file , upon uploading they dont throw any error , but i dont see the new icons added in my conditional formatting Iconset.
MyIcons theme.Json file
{ "name":"TestIconTheme",
"icons": {
"RedUpArrow": {
"description": "Red Up Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>"
},
"BlueDownArrow": {
"description": "Blue Down Arrow",
"url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>"
}
}
}
Not sure why the icons are not showing up,
- Is any thing wrong with my theme file (checked the icons URL part pasting browser the images are coming correctly )
- Is there any kind of setting that am i missing to get the new icons added to Iconset
- As PowerBI has updates every month and the links which am refering to are of July 2019 and Oct 2019, was there any change Json theme file for icons
Can any one please help me on this.
Thank you
Sunil
- Anonymous6 years ago
Hi Anonymous ,
Try this
{ "name":"TestIconTheme", "icons": { "RedUpArrow": { "description": "Red Up Arrow", "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>" }, "BlueDownArrow": { "description": "Blue Down Arrow", "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>" } } }Regards,
Harsh Nathani
6 Replies
- AnonymousNot applicable
Hi Anonymous ,
Try this
{ "name":"TestIconTheme", "icons": { "RedUpArrow": { "description": "Red Up Arrow", "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23FF0066' d='M 16 4.09375 L 9.28125 10.8125 L 10.71875 12.21875 L 15 7.9375 L 15 28 L 17 28 L 17 7.9375 L 21.28125 12.21875 L 22.71875 10.8125 Z' /></svg>" }, "BlueDownArrow": { "description": "Blue Down Arrow", "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'> <path fill='%233F9FEC' d='M 15 4 L 15 24.0625 L 10.71875 19.78125 L 9.28125 21.1875 L 16 27.90625 L 22.71875 21.1875 L 21.28125 19.78125 L 17 24.0625 L 17 4 Z'/> </svg>" } } }Regards,
Harsh Nathani
- AnonymousNot applicable
Hi Anonymous ,
Thanks for the solution, that fixed my issue Thanks a lot!
Really appreciate your help.
Thank you.
Sunil
- AnonymousNot applicable
Hi Harsh Nathani,
I would like to know where can I find the second screenshot you posted on this post on Power BI Desktop? I'm looking for conditional format and I can't find it.
Thanks
- amitchandak
Super User
- AnonymousNot applicable
Hi amitchandak ,
Thanks for your reply, yes the solution you suggested is great, but as per my current requirement, we need to add few set of custom icons, and we are any how using a theme for our client, so once we get them in the Icon set we can use across all the reports and tie it to the measure.
Thank you.
Sunil
- AnonymousNot applicable
Hi Anonymous ,
Try this:
{ "name": "Percent Icons", "icons": { "complete025": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 100,50 z' fill='#ED003C' /></svg> ", "description": "25% Complete" }, "complete050": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 50,100 z' fill='#E49B13' /></svg> ", "description": "50% Complete" }, "complete075": { "url":"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 1,1 0,50 z' fill='#E49B13' /> </svg>", "description":"75% Complete" }, "complete100": { "url": "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='#008A00' /> </svg>", "description": "100% Complete" } } }This adds the icon here:
Regards,
Harsh Nathani