Custom Icon doesn't work in Power BI Service

Hi Zoe Zhi, 

Thanks for the suggestions! I have the August 2019 version of Power BI deskop. 

My SVG files do render on Power BI service when I host the SVG images (using an http link as you suggested). However, this is not an option for me because I do not have anywhere I can host these images long term. 

There might be a bug with Power BI and the ability to render the SVG code. All my icons display correctly in Edge, but not in any other browser... 

Screen Shot Example

• Active2 is the only icon that renders in every browser, and it is using an image URL 

JSON file

{ "name":"Icon Test Power BI Theme",  

"icons": 
{  
"Active": {
"description": "Active","url": "data&colon;image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 286.054 286.054' style='enable-background:new 0 0 286.054 286.054;' xml:space='preserve'> <g><path style='fill:#3DB39E;' d='M143.031,0C64.027,0,0.004,64.04,0.004,143.027c0,78.996,64.031,143.027,143.027,143.027 c78.987,0,143.018-64.031,143.018-143.027C286.049,64.049,222.018,0,143.031,0z M143.031,259.236 c-64.183,0-116.209-52.026-116.209-116.209S78.857,26.818,143.031,26.818s116.2,52.026,116.2,116.209 S207.206,259.236,143.031,259.236z M199.241,82.187c-6.079-3.629-13.847-1.475-17.342,4.827l-47.959,86.147l-26.71-32.512 c-4.836-5.569-11.263-8.456-17.333-4.827c-6.079,3.638-8.591,12.39-4.657,18.004l37.169,45.241c2.78,3.611,5.953,5.775,9.27,6.392 l0.027,0.054l0.34,0.018c0.751,0.116,11.979,2.19,16.815-6.463l55.048-98.876C207.402,93.879,205.32,85.825,199.241,82.187z'/></g></svg>"  
}

,"Eligible": {
"description": "Active","url": "data&colon;image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 286.054 286.054' style='enable-background:new 0 0 286.054 286.054;' xml:space='preserve'> <g> <path style='fill:#ffa729;' d='M143.027,0C64.04,0,0,64.04,0,143.027c0,78.996,64.04,143.027,143.027,143.027 c78.996,0,143.027-64.022,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236 c-64.183,0-116.209-52.026-116.209-116.209S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209 S207.21,259.236,143.027,259.236z M143.036,62.726c-10.244,0-17.995,5.346-17.995,13.981v79.201c0,8.644,7.75,13.972,17.995,13.972 c9.994,0,17.995-5.551,17.995-13.972V76.707C161.03,68.277,153.03,62.726,143.036,62.726z M143.036,187.723 c-9.842,0-17.852,8.01-17.852,17.86c0,9.833,8.01,17.843,17.852,17.843s17.843-8.01,17.843-17.843 C160.878,195.732,152.878,187.723,143.036,187.723z'/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>"  
}

,"Disabled": {
"description": "Disabled", "url": "data&colon;image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 286.054 286.054' style='enable-background:new 0 0 286.054 286.054;' xml:space='preserve'><g><path style='fill:#E2574C;' d='M168.352,142.924l25.28-25.28c3.495-3.504,3.495-9.154,0-12.64l-12.64-12.649 c-3.495-3.486-9.145-3.495-12.64,0l-25.289,25.289l-25.271-25.271c-3.504-3.504-9.163-3.504-12.658-0.018l-12.64,12.649 c-3.495,3.486-3.486,9.154,0.018,12.649l25.271,25.271L92.556,168.15c-3.495,3.495-3.495,9.145,0,12.64l12.64,12.649 c3.495,3.486,9.145,3.495,12.64,0l25.226-25.226l25.405,25.414c3.504,3.504,9.163,3.504,12.658,0.009l12.64-12.64 c3.495-3.495,3.486-9.154-0.009-12.658L168.352,142.924z M143.027,0.004C64.031,0.004,0,64.036,0,143.022 c0,78.996,64.031,143.027,143.027,143.027s143.027-64.031,143.027-143.027C286.054,64.045,222.022,0.004,143.027,0.004z M143.027,259.232c-64.183,0-116.209-52.026-116.209-116.209s52.026-116.21,116.209-116.21s116.209,52.026,116.209,116.209 S207.21,259.232,143.027,259.232z'/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>" }

,"Discontinued": {
"description": "Discontinued","url": "data&colon;image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'> <path style='fill:#ffa729;' d='M256,0C114.617,0,0.002,114.616,0,256.001C0,397.386,114.617,512,256,512 c141.385,0,256-114.614,256-255.999S397.385,0,256,0z M256,445.201c-104.491,0-189.201-84.709-189.201-189.2 C66.8,151.507,151.509,66.799,256,66.799c104.492,0,189.201,84.708,189.201,189.202C445.201,360.492,360.492,445.201,256,445.201z' /> <path style='fill:#ffa729;' d='M21.837,256.001C21.84,118.276,130.602,5.97,266.918,0.247C120.722-5.887,0.002,110.869,0,256.001 c0,145.067,120.651,261.884,266.918,255.752C130.602,506.03,21.837,393.726,21.837,256.001z'/> <path style='fill:#ffa729;' d='M374.675,234.964c0-6.829-5.536-12.363-12.363-12.363H149.688c-6.827,0-12.363,5.534-12.363,12.363 v42.072c0,6.828,5.536,12.363,12.363,12.363h212.623c6.827,0,12.363-5.535,12.363-12.363L374.675,234.964L374.675,234.964z'/> <path style='fill:#ffa729;' d='M362.311,268.794H149.688c-6.827,0-12.363-5.534-12.363-12.362v20.604 c0,6.828,5.536,12.363,12.363,12.363h212.623c6.827,0,12.363-5.535,12.363-12.363v-20.604 C374.675,263.26,369.139,268.794,362.311,268.794z'/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>"
}

,"Active2": {
"description": "Active2","url": "https://image.flaticon.com/icons/svg/179/179372.svg"  
}

 ,"RedDiamond": {"description": "Red Diamond", "url": "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'> <rect x='3' y='3' transform='matrix(-0.7071 0.7071 -0.7071 -0.7071 19.3137 8.0004)' fill='#F78272' width='10' height='10'/> <path fill='#F25021' d='M8,0.222L0.222,8L8,15.778L15.778,8L8,0.222z M1.636,8L8,1.636L14.364,8L8,14.364L1.636,8z'/> </svg>"}
			
,"GreenTriangle": {"description": "Green Triangle", "url": "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'> <polygon fill='#84C28A' points='0.809,14.5 7.5,1.118 14.191,14.5 '/> <path fill='#449E44' d='M7.5,0L0,15h15L7.5,0z M7.5,2.236L13.382,14H1.618L7.5,2.236z'/> </svg>"}
	
,"YellowTriangle": {"description": "Yellow Triangle", "url": "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'> <polygon fill='#F9D087' points='0.809,14.5 7.5,1.118 14.191,14.5 '/> <path fill='#F9B23E' d='M7.5,0L0,15h15L7.5,0z M7.5,2.236L13.382,14H1.618L7.5,2.236z'/> </svg>"}

}
}