Custom Icons - Can a girl get a polygon?

[AEIOUandY]

Good day! I'm trying to create polygons for downard and upward pointing arrows (I just don't like the colour options available in the default conditional formatting icon sets). The easiest way I could think of to do this is to add polygons to a json theme, but I cannot for the life of me get it to work. 

I have successfully used 

"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' x = '0px' y='0px' width='300' height='300' viewBox='0 0 100 100'> <circle cx='50' cy='50' r='40' stroke='darkgreen' stroke-width='4' fill='limegreen' /> </svg>" 

as a measure (along with three others) to create custom circle icons. I've plonked this into my json file and it has no problem adding the circles to the conditional formatting in my file. When I try to create a polygon svg though, not so much. 

I'm assuming I need to just change the svg portion <circle ... blah blah blah> and this is what I've tried:

<polygon points='1,1 150,300 300,1' stroke='darkgreen' stroke-width='1' fill='limegreen' />

Power BI does not like. I assume either it doesn't play nice with polygons or I have NO idea what I'm doing or both. Any advice to steer me in the right direction is appreciated. 

Thanks in advance, hivemind! 

😊

[OwenAuger]

Hi @AEIOUandY 

Yes, that's correct, essentially just replace <circle... /> with <polygon... /> 🙂

Perhaps there was a minor syntax error if Power BI was rejecting the theme.

In this particular case I would also recommending enlarging the viewBox to '0 0 300 300' so that the full polygon is visible.

Putting the following in a Theme JSON file just with the polygon icon definition worked for me

(change &colon; back to : as the forum messes this up)

{
	"name": "TestPolygon",
	"icons": {
        "MyPolygon": {
			"description": "My Polygon",
			"url":
			"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' x = '0px' y='0px' width='300' height='300' viewBox='0 0 300 300'> <polygon points='1,1 150,300 300,1' stroke='darkgreen' stroke-width='1' fill='limegreen' /> </svg>" 
		}
	}
}

Are you able to get it working at your end?

Regards,

Owen

[AEIOUandY]

I appreciate this help, Owen. I'm wondering what I'm missing in the style below to get this to work. When i use the syntax you provided in my measure it does generate the down arrow, but now I'd like to add this to the style I have set up and am obviously missing something. 

{ "name":"MyStyle",

"dataColors":["#00747A","#C90062","#FF7F45","#00B2A9","#AE7CCA","#F07691","#72CE9B","#53284F"],
"icons": {

"MyPolygon": {

"description": "My Polygon",
"url": "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' x = '0px' y='0px' width='300' height='300' viewBox='0 0 300 300'> <polygon points='1,1 150,300 300,1' stroke='darkgreen' stroke-width='1' fill='limegreen' /> </svg>"

}

}

}

[Greg_Deckler · Accepted solution]

@AEIOUandY More than likely it is this:

"url": "data&colon;image/svg... The &colon; needs to be an actual colon

I created a bunch of these here: SVG Multi-Shape, Multi-Color Indicators - Microsoft Power BI Community

Also, MSHGQM includes a bunch of SVG measures that don't exhibit this issue with encoding : to &colon;

Microsoft Hearts Greg - YouTube

[AEIOUandY]

Oh my goodness, so grateful right now!! Thank you!