[SalesForce] lightning:icon pointing to SVG static resource has empty shadow root

An working SVG icon stored in a public static resource myicon_svg

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g id="requiredId"><path fill="#fff" d="m54.3 74.1c-2.4 2.5-6.3 2.5-8.7 0-7.2-7.7-21-22.4-21-22.5-6.2-6.5-6.2-17.2 0-23.7 3-3.2 7-4.9 11.3-4.9 4.3 0 8.3 1.7 11.3 4.9l1.2 1.5c0.8 1 2.4 1 3.2 0l1-1.3 0.2-0.2c3.1-3.3 7.1-5 11.3-5 4.3 0 8.3 1.7 11.3 4.9 6.2 6.5 6.2 17.2 0 23.7-0.1 0.2-13.8 14.9-21.1 22.6z"></path></g></svg>

embedded in an Aura component (with id according to this question)

<aura:component ..>
   <div class="slds-section slds-is-open">
     <h3 class="slds-section__title slds-theme_shade slds-p-around_small">
     <lightning:icon src="{! $Resource.myicon_svg + '#requiredId' }" />

doesn't display in the icon div but way outside the visble bounding box as this screenshot shows:

enter image description here

Why?!

Best Answer

I got this to work. Your SVG should look more like the following:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none">
    <symbol viewBox="0 0 100 100" id="requiredId">
        <path fill="#f44" d="m54.3 74.1c-2.4 2.5-6.3 2.5-8.7 0-7.2-7.7-21-22.4-21-22.5-6.2-6.5-6.2-17.2 0-23.7 3-3.2 7-4.9 11.3-4.9 4.3 0 
                             8.3 1.7 11.3 4.9l1.2 1.5c0.8 1 2.4 1 3.2 0l1-1.3 0.2-0.2c3.1-3.3 7.1-5 11.3-5 4.3 0 8.3 1.7 11.3 4.9 6.2 6.5 6.2 
                             17.2 0 23.7-0.1 0.2-13.8 14.9-21.1 22.6z">
        </path>
    </symbol>
</svg>

This was shamelessly borrowed from the SLDS SVG image asset resource (from this SVG file on https://lightningdesignsystem.com).

The demo for this code is as follows:

<aura:application extends="force:slds">   
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade slds-p-around_small">
            <lightning:icon src="{!$Resource.myicon_svg+'#requiredId'}" class="red-border-for-demo" />
        </h3>
    </div>
</aura:application>

(Red border added to demonstrate bounding box.)

Output:

I ❤ This SVG

It also appears to work with the size attribute for automatic resizing, etc.

Related Topic