SVG icons in matrix not showing up

[holywasabi]

Hi all, I need some help with my matrix.

For the matrix outlined in pink, the SVG icons do not show up 😞

The column [svg_url] has values formatted like this :

"data:image/svg+xml;utf8," &
"<svg fill='#4E8BA1' width='800px' height='800px' viewBox='0 0 1920 1920' xmlns='http://www.w3.org/2000/svg'><path d='M213.333 960c0-167.36 56-321.707 149.44-446.4L1406.4 1557.227c-124.693 93.44-279.04 149.44-446.4 149.44-411.627 0-746.667-335.04-746.667-746.667m1493.334 0c0 167.36-56 321.707-149.44 446.4L513.6 362.773c124.693-93.44 279.04-149.44 446.4-149.44 411.627 0 746.667 335.04 746.667 746.667M960 0C429.76 0 0 429.76 0 960s429.76 960 960 960 960-429.76 960-960S1490.24 0 960 0' fill-rule='evenodd'/></svg>"

The data category is set as Image URL

I've had success with the matrix outlined in yellow (using http links), but wanted to use a different method for linking svg icons as I wanted fuller control over the icons' colour.

I've also tested out the same values using a DAX measure [svg_url_DAX] and displaying it as a table (outlined in green), it shows up just fine, I wonder what went wrong. 😬

Link to .pbix file + svg icons :
https://drive.google.com/drive/folders/1d_6_pT5TJtg5KpRC79plvzXfako83upA?usp=sharing

Appreciate any help and pointers! Much thanks!

[lbendlin]

you need to unescape the "&colon;"  to just ":"

[holywasabi]

@lbendlin Thank you so much for your reply / answer and sorry for the late reply.

Not sure if I'm understanding you right.

I used your code as the values in a matrix, but the icons still does not show up. 😅

[lbendlin]

Instead of

data&colon;image/svg+xml;utf8,

use 

data : image/svg+xml;utf8,

(with the spaces removed if you want)