Adding a custom icon to a custom theme .json file

[AliceW]

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&colon;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? 

[AliceW]

So, 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&colon;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&colon;image ....

[v-easonf-msft]

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

[Whitewater]

Hi Eason:
I'm having trouble impoerting a json file (with icons)to Power BI Desktop. I get the following error message: 

#/ must be object (type; matching schema #/type)
I use a file converter to change my word file to a json file before trying to import. Can you please tell me what is wrong with my code below? It is my word docx. Thank you!

{

       "name": "icons for power bi",

       "icons": [

    {"description":  "iaexpired icon","url":

“data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD5klEQVR4nM2aTWhVRxTHfz6NXzWKSqOCVVQURTdZKKRBRGsrBRPd2GYjqOBGRfELF4K6kKaKIOpSXbSgxVJ1JVLowoREtKVU1ERU8AO/QfBb1KApR/5Phke8b+a+ue/lB5eXe++ZM+e8mTlz5ryAH1XAQmAfcBZ4BLwDXgG3gTZgN/C9ZHsdA4CNMrzb87oHbAWG0UtYDNxyDLwK7ALmA1OBL4DBwDjgW2AncKnAIdNRMfoAO4APMuhfGe/LN0C749BeIEcFnPhVBnQBa/UsFDN8DfBGuo4BfSkjO9TxE49RaAH+KSIzF3gqnXsoE4s1nbo8p1J+6hRjjiKcyf5Axgx0FrZNJyI6gqaZyd4FhpAhG52FncvAEdP5t+S3kRFVzj4REp1CHDHmSf5OVgt/obNPkKEjFv2uq80CMmC/lNtml6UjxkrgBVBHBpxNMa3SOpIpj2TQlIA2XzmO2N+9grcyqDqgzXHHkT8C+6vTZjqLCjsyGrjvOHIyoK9+TmJ5SfcVmVqjgE7J35cTEwL6Wl2Q8tt9NNo9F3sNcFmynRqZEEYAj9X+iD4f63kUdnuE3y+Bi5K7AoxJ0c8BtW/TnnJG9xb+o/C1x4Z4zJnXNjKhTFcy+h6o1bNa3XfpfclYHvRAhtpJryeWAr9pZNLwp/QfLHh+UM/tfRQ2SOGFDE5zi6T7eQ/rqsY5rzTGKjLclMJ1xKM/cE16N31GZpPem5zJl0xj4MHKh80eRrrObo7U78ezgu9R12fPeSZ9DUVkGyT3TO1KxsLiL07xYV0Ja+ZQ4ELOBwRrRyxntig0dmsTXBKoww2tMzzbTNPZ3trNJCI23DecdOK6Ns/v1OkQFekmAZMLvojWhM3uvN79nnA2ak1ZhkqMZusLksSerg/ORvdjkfTjv4Rkc4STxpie6OSUfu9SivFQWfNLjdQpYCQwSEXtpIQwyRE3sbwtfRVhu4zoSEjRiznS18nrMqu4JDFWI9StdURKR9yKy2tgPGXmqDo/UUTOxxH0Pp/yl406Lfi3BRGsFEcmqghuemdTBnJOSG32kPd1xPg5RQU0NSvUmUWyoZEdqXZC//IItnp1tMyzTYgjyIGQLyoVaYY+1JFc4NQNZpKzGOsD2iWlKJ+jXv28Ub9RKXd4POoZ3oOoxIY11nPD9aafk0JYShJKs6bVTyWkQBdjVClXOz/YWBofSn6x22cog5yfCFdRAsOdNLsppY78Yj+Xsn2Tc0wwe1KRP/i0xz74BNIiO+x/Y4LJ7CiagtoUR+lPnI5dHCiRw7Lnr5BGDU61ME0BOwtqnCql/aDrRUeRM3ulrw5fR/JVkd56tfwPPH62Tdi7uGMAAAAASUVORK5CYII=”}

,{"description": " ianear icon","url":

       “data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAED0lEQVR4nO2aWWwNURjH/y2VoJbaipCW2DU8kJLwYo9QsRQPPFA8EFss8UCoJyEiliK8EMEDkUjsYgmJrYJWiJRYQtQaW221jZzkP8kx+b6509u5t/fiS+alv3vOnP/M+ZbzTYH/FtjS8BfYOgCfAHRGEtswAL8AfAGQhSS1DABPATgAFsTrpg6vMK2Ic54FkCrwBgCGAkhJZCE5AL4D+Aagi8DN4o/zniMSWchRzrde4YvJnwFomqhCenGu9/QTr3UFUAngJ4AhCNmcEIUc4FyrlC11hnyTMr4NgDkA6takkCw+6c8AWgh8nLWlGgm8IYA7/E1+TQpZznl2CcxErpvk05Xx+8lvAahfU0LMtnnAeQYIfAzZfaVkmUD+AUDHaBcRhpDenOORkhtOks8UmHn65T7c3bZrI1UIYQhZ4ePE7ek7H+kHXlvGscXKQ8iwfGderIUUc47hAltCtkNgJjq99tmSaQBOk5cASI+lkHpWJpfC5kXOP0pgBdbbkGwluanb2kZaSHWF9OP468q2cEOyJNLNK1MElg3gK/lA5d61Acxwk2t1hczj+G1KKW/YOYE1B/CDi5XyylaOPaTctxWAK/zNQ1vINAC1ohCymeNNRtZyyxqfBHlCYOkAKsi7K5GuhPy5+8Yc67oWRSF3hGPzBLaXbLJyenQo1msTLQeXbI+VPDPdPzqe6yr3XlC7xXE9BHaJzPiR19xSfqTAtpGZsO61vlby7GADR7imVkGIm8zMnvXaEzIp4twjMxWx1674hOTtZBu8QBJiJgpq7zhGcti3ZI0F9oZMKvdfkklNizKyPkGEmM5HUPvGMWlVZJVkdXxYA4F9IWvytwjJCCLkchJsrdwgQqRMG7az3/Vx9sthOHu8w2+eT/gtFFgfsgq/8FssOVEEO+xTFO4JkBBX+By0SpV7uvPelhJiQTVLlLlVLFHyycyhSypBKshzFH6D/EXYRaPZu1rReN6naKxUgsEWjjVvXLJMa3uWhSGkP8ebJ+RXxptzi1bGS5VEllXGD1buncLA9EfRGK3V55P9riz2QoCDlQkwkrlH6PJ4HKzAhWi9XPeou1Ng5rD1inyQwE0iPWU5vpQgQxVSyDmM41e1+bDUeiupEZoPs2MtxI3tj5XFnCCfFaEdNEuZP5uRr3WshaSyp6VtkdFkD5S6a7yV5DpFu4gwhNgdj91KdCklN80CyfZZSc637RNrIe3oC6Y6bSnwsVYTu3GEJvbEmhRi7CDnWq1wt9lmPs1ByR3zlTAeVyG51nlaqtm6WB96zDfEUM0JUYjdsN6o8EXWFjNlSsIK6Wll+m6K4x+zCtWEFWKfJ84pecU49qRoP7HF05qxA2jELESS2ygKSep/4XCtiJ+qTb313/4p+w39WbqhZK4ExQAAAABJRU5ErkJggg==”}
 ,{"description": " iamid icon", "url":

“data&colon;image/png;base64,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”}
,{"description":"iafar icon","url":

   “data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAADuElEQVR4nO2YyYsVVxTGf4toutV0P22nPAIRxCmCrhQDieMyJhFx2rUmnY4hiCsnlITEQAJBXekfoaYFEwPpdCDqynkAh3ai04tWQWxjG+P85MBXcn10Vd2qV9VP5H1wF3XvOd855w6nzr1QQw01JMFY4AfgDPAfcA84CWwFRiXgGS2dU+IwrtPA98AYcsJy4F+gFNJsbLEHzxLgbgzP0qydXwE8lYEDwAKgCRgKzAN+1djTmCDM+WeS3Q/MFUeTOH93eJZl5XzRmfktEXKbJXMnZDuNdmZ+UwTPN85KvJ2B//wkwj88ZIOV+K6fsa3OzMehXbI/UiHeAHpENstDfr5k7WCX47TGbNvEYZZke+RDaiwUUaen/FuSt61Sjj6NDfPkOi/5j6gAe0SyIYFOkE18+8OwUfK7SYkRwAPgCfBOFQIoyvZDYCQpsMZJm1QhAJy0+jUpcFzKy6oYwHLpHEuox1Qp3gbqqhjAYOCW9KYlUdwmpZ0kR5YBGHZJ72c8YXn3upRmUP0AZkrvBjDIR+ETKZwjHbIOwHBWuh/jgTYJr+PVCWC9dPfGCTYp9z+uoJAKK5MrCWCMfIr9J6yVESvKeIUCMPwmffs/heKkhKxubwBataW6gPvA/0C3KsrVQCGDLTQc+EqT1i0b92WzTT40yCfTPxHm/HQJ9KkcDoqvqHZX9XtdigBM59uY21kpxKd+/wk7ypSeqS5vBsYD9bo9TQa+AP50ZG3l3k0QwDjdh0tqZqcFmCQb9bK5EuhwbnFB215Obvn1piNg5fOHxGMOcEk6XQoiLgBz/h/HzmwPO7MdOyX5+tI/YZEz+DfQSLKq9ZCzEnEBBDIHtf99UXDsWPvUHdynzgs6MElhQVyOyTbuWGdC5wM0OithPr+4bD9S5/ukx7wEAfhsmzB8II5HweNBq3OQKkWHRwBZ2GkXlyUTftHHZxkQB5MR1T7PwE6LuOzKy1V9TMiAeLJHAJYqK8VEcV1B75L2MSQD4mEeW8j3VSIKQ8V1L81zRxQanFe1cuRmpzPDpZ0irov9jOVmZ597oivEl+KyxFCO3Oys0ofVNpXiL3FZ/VSO3OwMB3rVYbVNWgTvor0hZXaudjap81rKVzC3lIi6iuZmpw44qoFDEvSFXUMPS/dIzDtSrnaKuhGVFKXVNj7LeUU63eKIQ652ioou+Ol0qDyYovxt7T1lgeAgBTPi4/yA2KnTc3pw4KJar5483kzg/IDZKShNteme0Kd2QX3NIdkmKQoDZKeGGl5LPAfwA9lXfUwyxAAAAABJRU5ErkJggg==”}

]

}

[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

[AliceW · Accepted solution]

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.