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 :)
Best Answer
You can't. The svg resource of a component is used to show a custom icon in Community Builder and App Builder. Further, lightning-icon only provides access to standard SLDS icons, not custom icons. You can Instead put the svg directly in to a component's template, or use a static resource to load the svg, as outlined in that same document that you've linked.