Error importing json theme file

[kman42]

Adminittedly, I know nothing about json or svg, but I'm struggling to understrand why some icons in svg format prevent my file from loading. I keep getting an error saying that the name or colors are causing problems. The problem is caused by custom icon 04--if I remove that snippet, it loads fine and the icons work.

{ "name":"TestIconTheme",
 "icons": {
        "custom icon 01": {
            "url": "data&colon;image/svg+xml;utf8, <svg fill='%23000000' width='800px' height='800px' viewBox='0 -39.5 105 105' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.018 11.089L15.138.614c1.23-.911 3.086-.795 4.147.26.461.46.715 1.045.715 1.651v20.95C20 24.869 18.684 26 17.06 26a3.238 3.238 0 0 1-1.921-.614L1.019 14.911C-.212 14-.347 12.405.714 11.35c.094-.094.195-.18.303-.261zm102.964 0c.108.08.21.167.303.26 1.061 1.056.925 2.65-.303 3.562l-14.12 10.475A3.238 3.238 0 0 1 87.94 26C86.316 26 85 24.87 85 23.475V2.525c0-.606.254-1.192.715-1.65 1.061-1.056 2.917-1.172 4.146-.26l14.12 10.474zM35 17a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm18 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm18 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/></svg>",
            "description": "transfer arrow"
        },
        "custom icon 02": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20.924 5.617a.997.997 0 0 0-.217-.324l-3-3a1 1 0 1 0-1.414 1.414L17.586 5H8a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h9.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3A.997.997 0 0 0 21 6m-.076-.383a.996.996 0 0 1 .076.38l-.076-.38zm-17.848 12a.997.997 0 0 0 .217 1.09l3 3a1 1 0 0 0 1.414-1.414L6.414 19H16a5 5 0 0 0 5-5v-2a1 1 0 1 0-2 0v2a3 3 0 0 1-3 3H6.414l1.293-1.293a1 1 0 1 0-1.414-1.414l-3 3m-.217.324a.997.997 0 0 1 .215-.322l-.215.322z' fill='%230D0D0D'/></svg>",
            "description": "resubmission arrow"
        },
      
        "custom icon 04": {
            "url": "data&colon;image/svg+xml;utf8, <svg fill='%23000000' xmlns='http://www.w3.org/2000/svg' 
	 width='800px' height='800px' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'>
<path d='M43,9C33.6-0.3,18.4-0.3,9,9c-9.3,9.4-9.3,24.6,0,34c9.4,9.4,24.6,9.4,33.9,0C52.3,33.6,52.3,18.4,43,9z
	 M42,28c0,0.6-0.4,1-1,1H30c-0.5,0-1,0.5-1,1v11c0,0.5-0.5,1-1,1h-4c-0.6,0-1-0.4-1-1V30c0-0.6-0.4-1-1-1H11c-0.6,0-1-0.4-1-1v-4
	c0-0.5,0.5-1,1-1h11c0.6,0,1-0.4,1-1V11c0-0.5,0.5-1,1-1h4c0.5,0,1,0.4,1,1v11c0,0.6,0.4,1,1,1h11c0.5,0,1,0.5,1,1V28z'/>
</svg>",
            "description": "arrow down 04"
        },
        "custom icon 05": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M115 172.8C115 172.8 138.2 128.2 78 68.2L58 88 58 20 126 20 107.6 38.4C107.8 38.6 159.8 101 115 172.8Z' fill='%2300B050'/></g></g></g></g></svg>",
            "description": "arrow up 01"
        },
        "custom icon 06": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M154 164C154 164 106 149 106 64L134 64 86 16C86 15.4 38 64 38 64L64 64C64 64.2 71.4 145.2 154 164Z' fill='%2300B0F0'/></g></g></g></g></svg>",
            "description": "arrow up 02"
        },
        "custom icon 07": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M81.6 20.2 108 20.4C111.4 20.4 114 17.8 114 14.4 114 11 111.4 8.4 108 8.4L68 8C66.6 8 65.4 8.4 64.2 9.4 64 9.4 64 9.6 63.8 9.8 63.6 10 63.4 10 63.2 10.4 63.2 10.4 63 10.6 63 10.8 63 10.8 62.8 11 62.8 11.2 62.2 12 62 13 62 14L61.6 54C61.6 57.4 64.2 60 67.6 60 71 60 73.6 57.4 73.6 54L73.8 29.2C105.2 51 120.2 81.6 118.2 120.2 117 139.2 112.4 157.8 104.4 175.2 103 178.2 104.2 181.6 107.2 183 110 184.4 113.6 183.4 115.2 180.4 123.8 161.8 129 141.6 130.2 121 131.8 91.6 124.6 50.4 81.6 20.2Z' fill='%2300B050'/></g></g></g></g></svg>",
            "description": "arrow up 03"
        },
        "custom icon 08": {
            "url": "data&colon;image/svg+xml;utf8, <svg fill='%23000000' width='800px' height='800px' viewBox='0 0 24 24' id='left-right-arrow' data-name='Line Color' xmlns='http://www.w3.org/2000/svg' class='icon line-color'><line id='secondary' x1='4' y1='8' x2='20' y2='8' style='fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></line><polyline id='secondary-2' data-name='secondary' points='7 5 4 8 7 11' style='fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline><polyline id='primary' points='17 19 20 16 17 13' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline><line id='primary-2' data-name='primary' x1='20' y1='16' x2='4' y2='16' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></line></svg>",
            "description": "arrow up 04"
        }





    }
}

[Anonymous · Accepted solution]

Hi, @kman42 

Based on the json code you provided, I corrected the following:

{
    "name": "TestIconTheme",
    "icons": {
        "custom icon 01": {
            "url": "data&colon;image/svg+xml;utf8, <svg fill='%23000000' width='800px' height='800px' viewBox='0 -39.5 105 105' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.018 11.089L15.138.614c1.23-.911 3.086-.795 4.147.26.461.46.715 1.045.715 1.651v20.95C20 24.869 18.684 26 17.06 26a3.238 3.238 0 0 1-1.921-.614L1.019 14.911C-.212 14-.347 12.405.714 11.35c.094-.094.195-.18.303-.261zm102.964 0c.108.08.21.167.303.26 1.061 1.056.925 2.65-.303 3.562l-14.12 10.475A3.238 3.238 0 0 1 87.94 26C86.316 26 85 24.87 85 23.475V2.525c0-.606.254-1.192.715-1.65 1.061-1.056 2.917-1.172 4.146-.26l14.12 10.474zM35 17a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm18 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm18 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/></svg>",
            "description": "transfer arrow"
        },
        "custom icon 02": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20.924 5.617a.997.997 0 0 0-.217-.324l-3-3a1 1 0 1 0-1.414 1.414L17.586 5H8a5 5 0 0 0-5 5v2a1 1 0 1 0 2 0v-2a3 3 0 0 1 3-3h9.586l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3A.997.997 0 0 0 21 6m-.076-.383a.996.996 0 0 1 .076.38l-.076-.38zm-17.848 12a.997.997 0 0 0 .217 1.09l3 3a1 1 0 0 0 1.414-1.414L6.414 19H16a5 5 0 0 0 5-5v-2a1 1 0 1 0-2 0v2a3 3 0 0 1-3 3H6.414l1.293-1.293a1 1 0 1 0-1.414-1.414l-3 3m-.217.324a.997.997 0 0 1 .215-.322l-.215.322z' fill='%230D0D0D'/></svg>",
            "description": "resubmission arrow"
        },
        "custom icon 04": {
            "url": "data&colon;image/svg+xml;utf8,<svg fill='%23000000' xmlns='http://www.w3.org/2000/svg' width='800px' height='800px' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'><path d='M43,9C33.6-0.3,18.4-0.3,9,9c-9.3,9.4-9.3,24.6,0,34c9.4,9.4,24.6,9.4,33.9,0C52.3,33.6,52.3,18.4,43,9z M42,28c0,0.6-0.4,1-1,1H30c-0.5,0-1,0.5-1,1v11c0,0.5-0.5,1-1,1h-4c-0.6,0-1-0.4-1-1V30c0-0.6-0.4-1-1-1H11c-0.6,0-1-0.4-1-1v-4c0-0.5,0.5-1,1-1h11c0.6,0,1-0.4,1-1V11c0-0.5,0.5-1,1-1h4c0.5,0,1,0.4,1,1v11c0,0.6,0.4,1,1,1h11c0.5,0,1,0.5,1,1V28z'/></svg>",
            "description": "arrow down 04"
        },
        "custom icon 05": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M115 172.8C115 172.8 138.2 128.2 78 68.2L58 88 58 20 126 20 107.6 38.4C107.8 38.6 159.8 101 115 172.8Z' fill='%2300B050'/></g></g></g></g></svg>",
            "description": "arrow up 01"
        },
        "custom icon 06": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M154 164C154 164 106 149 106 64L134 64 86 16C86 15.4 38 64 38 64L64 64C64 64.2 71.4 145.2 154 164Z' fill='%2300B0F0'/></g></g></g></g></svg>",
            "description": "arrow up 02"
        },
        "custom icon 07": {
            "url": "data&colon;image/svg+xml;utf8, <svg width='190' height='190' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='hidden'><g><g><g><g><path d='M81.6 20.2 108 20.4C111.4 20.4 114 17.8 114 14.4 114 11 111.4 8.4 108 8.4L68 8C66.6 8 65.4 8.4 64.2 9.4 64 9.4 64 9.6 63.8 9.8 63.6 10 63.4 10 63.2 10.4 63.2 10.4 63 10.6 63 10.8 63 10.8 62.8 11 62.8 11.2 62.2 12 62 13 62 14L61.6 54C61.6 57.4 64.2 60 67.6 60 71 60 73.6 57.4 73.6 54L73.8 29.2C105.2 51 120.2 81.6 118.2 120.2 117 139.2 112.4 157.8 104.4 175.2 103 178.2 104.2 181.6 107.2 183 110 184.4 113.6 183.4 115.2 180.4 123.8 161.8 129 141.6 130.2 121 131.8 91.6 124.6 50.4 81.6 20.2Z' fill='%2300B050'/></g></g></g></g></svg>",
            "description": "arrow up 03"
        },
        "custom icon 08": {
            "url": "data&colon;image/svg+xml;utf8, <svg fill='%23000000' width='800px' height='800px' viewBox='0 0 24 24' id='left-right-arrow' data-name='Line Color' xmlns='http://www.w3.org/2000/svg' class='icon line-color'><line id='secondary' x1='4' y1='8' x2='20' y2='8' style='fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></line><polyline id='secondary-2' data-name='secondary' points='7 5 4 8 7 11' style='fill: none; stroke: rgb(44, 169, 188); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline><polyline id='primary' points='17 19 20 16 17 13' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></polyline><line id='primary-2' data-name='primary' x1='20' y1='16' x2='4' y2='16' style='fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'></line></svg>",
            "description": "arrow up 04"
        }
    }
}

Now it's working:

You need to make sure that <path> the d attribute in the tag is complete and has no superfluous parts.

Best Regards

Jianpeng Li

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[Jai-Rathinavel]

Hi @kman42 , Can you give me the icons bundled in a zip folder. So that I can create a custom theme json and share it with you. If not you can use png to base64 online tool and paste the values of each icons in your json file. 

Thanks,

Jai

[pbiuseruk]

Hi,

It could actually be a couple of different things but I'd suggest to try and firstly replace the first line to this data&colon;image/svg+xml;utf8,

Then I'd think about removing the enable-background, as that isn't a commonly used property and sometimes it won't be supported by Power BI.

More generally, if the svg is complex, Power BI won't accept it.

Please let me know if that helps.