Forum Discussion
Power ParticipantAdding a custom icon to a custom theme .json file
Hi all,
I have created a beatiful custom theme with fantastic colors using the Theme Generator: https://themes.powerbi.tips/
However, I really need to add a custom cloud icon in there and I am stuck.
This is what I currently have:
{
"name": "theme created by powerbi.tips https://themes.powerbi.tips",
"dataColors": [
"#8b7a2b",
"#008796",
"#657a85",
"#98afba",
"#ab82a8",
"#b7a6b5",
"#55bf81",
"#d12630"
],
"visualStyles": {}
}
I found a post in this community offering a .json post with custom icons (thank you!), but it didn't include any with clouds, such as below.
This is the code they used...
{
"name": "PowerBI.Tips & Havens Consulting Icon Set",
"icons": {
"YellowDash": {
"description": "Yellow Dash",
"url": "data:image/svg+xml;utf8, <svg xmlns=' http://www.w3.org/2000/svg' viewBox='0 0 15 15'> <rect x='0.5' y='5.5' fill='%23F9D087' width='14' height='4'/> <path fill='%23F9B23E' d='M0,5v5h15V5H0z M14,9.001H1V6h13V9.001z'/> </svg>"
}
}
}
I found one icon I like... but I can't figure out where to paste its link!
Can anyone help me include any cloud-looking icon in my .json file, please?
Ok, I got it! https://onlineimagetools.com/convert-image-to-data-uri
Using the resulting code allowed me to have a custom icon in my custom PBI theme. Sweet victory :0)
Thank you for your help - looking for svg converters is what allowed the solution to pop up.
5 Replies
AliceWSo, I just copy and pasted in my browser the url from the icon and... I can actually change the resulting imagine by tinkering with the codes!
What is this sorcery? :0)
And how can I get this code for a cloud, please?
data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'> <path fill='%23F2CB05' d='M31.5,29.4c-0.5,0.7-1,1.3-1.5,1.9c0,0.1,0,0.1,0,0.2v6c0,1.7-1.3,3-3,3h-6c-1.7,0-3-1.3-3-3v-6c0-0.1,0-0.1,0-0.2c-0.5-0.6-1-1.2-1.5-1.9C12.1,26.9,9,22.1,9,16.5c0-8.3,6.7-15,15-15s15,6.7,15,15C39,22.1,35.9,26.9,31.5,29.4z'/> <path fill='%23545453' d='M21.9,40.5h4.3c1.2,0,2.1,0.7,2.1,1.5s-1,1.5-2.1,1.5h-4.3c-1.2,0-2.1-0.7-2.1-1.5S20.7,40.5,21.9,40.5z'/> <path fill='%23545453' d='M21.9,43.5h4.3c1.2,0,2.1,0.7,2.1,1.5s-1,1.5-2.1,1.5h-4.3c-1.2,0-2.1-0.7-2.1-1.5S20.7,43.5,21.9,43.5z'/> </svg>
For some reason, data : image at the beginnig is converted into data:image ....
- v-easonf-msft
Community Support
Hi, AliceW
You might consider using a free online converter to convert your images to SVG files.
Then use Notepad to open it to get the svg code.
Best Regards,
Community Support Team _ Eason- AliceW
Hi Eason,
Tried a few of them, but none have the start 'data : image' (without the spaces) that seem needed.
Would you have a suggestion for me, please?
Thanks,
Alice
