Custom icons using svg code help

[ACraig08]

So I am brand new to working with SVG and adding custom icons so I appriciate your patience in advance!

So I downloaded a couple of SVG's from Material Symbols & Icons - Google Fonts. I created a table in my Power BI for the two icons I downloaded and this is the code I have in the two rows for the two different icons. 

data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#0D5257"><path d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>

data&colon;image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="#A6192E"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>

Below is what they look like. 

One thing I am trying to figure out is why when I add the Icon field to the table the rows become so far apart! Before I add them they look normal like this:

Any help is greatly appriciated!

[V-yubandi-msft]

Hi @ACraig08 ,

I hope this information is helpful. Please let me know if you have any further questions or if you'd like to discuss this further. If this answers your question, please Accept it as a solution and give it a 'Kudos' so others can find it easily.

Thank you.

[V-yubandi-msft]

Hi @ACraig08 ,

I wanted to check if you had the opportunity to review the information provided. Please feel free to contact us if you have any further questions. If my response has addressed your query, please accept it as a solution and give a 'Kudos' so other members can easily find it.

[V-yubandi-msft · Accepted solution]

Hi @ACraig08 ,

Thanks for posting your query in the Microsoft Fabric Community. I tried using inline SVG (data&colon;image/svg+xml) in a calculated column and applied it through conditional formatting in a table visual. However, Power BI doesn’t support rendering SVG data URIs inside table visuals. Instead of displaying the icon, it shows the raw SVG code as plain text.

This appears to be a known limitation in Power BI, where image rendering only works with actual image URLs pointing to hosted files (PNG or JPG from the web), rather than inline SVG strings.

As an alternative, you can create icons using conditional formatting, following the approach outlined below. 

 If my response resolved your query, kindly mark it as the Accepted Solution to assist others. Additionally, I would be grateful for a 'Kudos' if you found my response helpful.