Custom Icon doesn't work in Power BI Service

Question

Purpose:&nbsp;Create custom SVG icon. Then use this icon in new conditional formatting icons option.&nbsp;&nbsp;Background:&nbsp;I created a red "Disabled" icon that works fine in Power BI desktop. However, when I publish to Power BI online, the icon breaks (regardless of browser).&nbsp;&nbsp;Does anyone know why? Or how to fix it? Code below&nbsp;&nbsp;&nbsp;"Disabled": {"description": "Disabled", "url": "data&amp;colon;image/svg+xml;utf8, &lt;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'&gt;&lt;g&gt;&lt;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'/&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;"}&nbsp;Power BI Desktop Image:&nbsp;Power BI online image:&nbsp;

dax · Answer

Hi slc7456,
I test this in my enviornment(july version desktop), I find that thesvg seems not work in desktop, I test below(your sampel and commom svg)
Measure 7 = SWITCH(true(),[Measure]&lt;=3,"data;image/svg+xml;utf8, &lt;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'&gt;&lt;g&gt;&lt;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'/&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;}", [Measure]&lt;=4,"StarMediumLight","data&amp;colon;image/svg+xml;utf8, &lt;svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 100 100'&gt; &lt;circle cx='50' cy='50' r='40' stroke='purple' stroke-width='4' fill='purple' /&gt; &lt;/svg&gt;"
)
This don't work.
So workaround is that you could&nbsp; use url directly.
Icon Set Measure = 
SWITCH(
     TRUE(),
     [Measure 3] &lt; 0.3, "https://i.gifer.com/Omjx.gif",
     "StarMediumLight"
     
)
Or import icon by json
{
     "name": "CustomIcons",
     "icons": {
          "fire": {
               "url": "https://i.gifer.com/Omjx.gif",
               "description": "Fire!"
          },
          "explosion": {
               "url": "https://i.gifer.com/3iCN.gif",
               "description": "Boom!"
          },
         "StarMediumLight": {
               "url": "https://www.uscsd.k12.pa.us/cms/lib/PA01000033/Centricity/Domain/1/library-icon.png",
               "description": {"resourceKey": "Icon_ColoredArrowUpRed"}
         }
     }
}
You could refer to&nbsp;Power BI Desktop July 2019 Feature Summary&nbsp;for details.
Best Regards,Zoe Zhi
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

slc7456 · Answer

Hi,&nbsp;&nbsp;I actually did import this icon using a JSON file (not as a DAX measure as your calculation shows).&nbsp;&nbsp;If you import the below Power BI theme, you'll see that it works in desktop, but not in Power BI service.&nbsp;&nbsp;{
"name":"Icon Test Power BI Theme",

"icons": {
"Disabled": {"description": "Disabled", "url": "data&amp;colon;image/svg+xml;utf8, &lt;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'&gt;&lt;g&gt;&lt;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'/&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;"}
}
}

dax · Answer

Hislc7456,
I test your json file in my environment, I&nbsp; find that this can't work in my environment

What is your version of your desktop? I think this might be caused by svg code. I suggest you could follow my above suggestions to use http directly or use link in json.
Best Regards,Zoe Zhi
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

slc7456 · Answer

Hi&nbsp;Zoe Zhi,&nbsp;&nbsp;Thanks for the suggestions! I have the August 2019 version of Power BI deskop.&nbsp;&nbsp;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.&nbsp;&nbsp;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...&nbsp;&nbsp;Screen Shot Example Active2 is the only icon that renders in every browser, and it is using an image URL&nbsp;&nbsp;JSON file{ "name":"Icon Test Power BI Theme",

"icons": 
{  
"Active": {
"description": "Active","url": "data&amp;colon;image/svg+xml;utf8,&lt;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'&gt; &lt;g&gt;&lt;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'/&gt;&lt;/g&gt;&lt;/svg&gt;"  
}

,"Eligible": {
"description": "Active","url": "data&amp;colon;image/svg+xml;utf8, &lt;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'&gt; &lt;g&gt; &lt;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'/&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;/svg&gt;"  
}

,"Disabled": {
"description": "Disabled", "url": "data&amp;colon;image/svg+xml;utf8, &lt;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'&gt;&lt;g&gt;&lt;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'/&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;g&gt;&lt;/g&gt;&lt;/svg&gt;" }

,"Discontinued": {
"description": "Discontinued","url": "data&amp;colon;image/svg+xml;utf8, &lt;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'&gt; &lt;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' /&gt; &lt;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'/&gt; &lt;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'/&gt; &lt;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'/&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;g&gt; &lt;/g&gt; &lt;/svg&gt;"
}

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

,"RedDiamond": {"description": "Red Diamond", "url": "data&amp;colon;image/svg+xml;utf8, &lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'&gt; &lt;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'/&gt; &lt;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'/&gt; &lt;/svg&gt;"}
			
,"GreenTriangle": {"description": "Green Triangle", "url": "data&amp;colon;image/svg+xml;utf8, &lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'&gt; &lt;polygon fill='#84C28A' points='0.809,14.5 7.5,1.118 14.191,14.5 '/&gt; &lt;path fill='#449E44' d='M7.5,0L0,15h15L7.5,0z M7.5,2.236L13.382,14H1.618L7.5,2.236z'/&gt; &lt;/svg&gt;"}
	
,"YellowTriangle": {"description": "Yellow Triangle", "url": "data&amp;colon;image/svg+xml;utf8, &lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'&gt; &lt;polygon fill='#F9D087' points='0.809,14.5 7.5,1.118 14.191,14.5 '/&gt; &lt;path fill='#F9B23E' d='M7.5,0L0,15h15L7.5,0z M7.5,2.236L13.382,14H1.618L7.5,2.236z'/&gt; &lt;/svg&gt;"}

}
}&nbsp;

Forum Discussion

Custom Icon doesn't work in Power BI Service

4 Replies

Related content

Gallery Terms of Service

Custom Visuals Appear Blurry in Power Bi Services

Customer Scorecard

Custom Visual

Service Date