Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
slc7456
Advocate III
Advocate III

Custom Icon doesn't work in Power BI Service

‎08-20-2019 03:58 PM

Purpose: Create custom SVG icon. Then use this icon in new conditional formatting icons option. 

 

Background: 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). 

 

Does anyone know why? Or how to fix it? Code below 

 

 

"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>"}

 

Power BI Desktop Image: 

disabled.png

Power BI online image: 
onlineBreaks.png

Labels:
Message 1 of 5
2,903 Views
0
4 REPLIES 4
dax
Community Support
Community Support

‎08-20-2019 11:23 PM

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]<=3,"data;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>}", [Measure]<=4,"StarMediumLight","data&colon;image/svg+xml;utf8, <svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 100 100'> <circle cx='50' cy='50' r='40' stroke='purple' stroke-width='4' fill='purple' /> </svg>"
)

This don't work.

So workaround is that you could  use url directly.

Icon Set Measure = 
SWITCH(
     TRUE(),
     [Measure 3] < 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 Power BI Desktop July 2019 Feature Summary 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.

Message 2 of 5
2,874 Views
0
slc7456
Advocate III
Advocate III
In response to dax

‎08-21-2019 07:55 AM

Hi, 

 

I actually did import this icon using a JSON file (not as a DAX measure as your calculation shows). 

 

If you import the below Power BI theme, you'll see that it works in desktop, but not in Power BI service. 

 

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

"icons": {
"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>"}
}
}

icon.png

Message 3 of 5
2,863 Views
0
dax
Community Support
Community Support
In response to slc7456

‎08-23-2019 02:27 AM

Hislc7456,

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

266.PNG

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.

Message 4 of 5
2,844 Views
0
slc7456
Advocate III
Advocate III
In response to dax

‎08-27-2019 12:36 PM

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 

customIconsEdge.png

 

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>"}

}
}

 

Message 5 of 5
2,809 Views
0

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.

View All
Top Solution Authors
View All
Top Kudoed Authors
View All