Custom icons from static resource on <lightning:icon> not working

I had the same issue and ask in Trailblazer Community here.

I got the answer from Greg Rewis: "You need to have an id on the <g> element of the SVG. Then, simply concatenate the name together like this: <lightning:icon src="{! $Resource.sign + '#custIcon'}" alternativeText="My Custom Icon" />."

To do that, you need to open your svg file with a text editor, and you'll see something like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
        <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
    </g>
</svg>

Just add an id to the <g> tag, something like:

<g stroke="none" id="myAwesomeId" stroke-width="1" fill="none" fill-rule="evenodd">

And then add it to the name of your resource:

<lightning:icon src="{! $Resource.sign + '#myAwesomeId'}" alternativeText="My Custom Icon" />

Doc is supposed to be updated but you can add your voice to the thread :)

Also, I wasn't able to set the proper size to my svg as you'll see in the post, I'll be interested if you know how to do it :)