Looping interpolated SVG sprites - html

Question

I've been trying to figure out how to interpolate these svg sprites in a loop. There's something missing to the html svg < use > element's path.
loop
each feature, slug in public.feature._data
.feature__wrap
.feature__image
svg
use(xlink:href="/assets/defs.svg#icon-feature-#")
.feature__content
h3.feature__title #{ feature.title }
p.feature__text #{ feature.text }
svg sprites
<symbol id="icon-feature-1" viewBox='0 0 512 512'>
<desc>Monitor Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-2" viewBox='0 0 512.004 512.004'>
<desc>Cellphone Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
<symbol id="icon-feature-3" viewBox='0 0 64 64'>
<desc>Gear Icon</desc>
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
</symbol>
Note: I just used a random svg < path > to make it easier to read and lessen the amount of characters on the snippet
Note2: I've double checked the path of each single one and it works just fine so as to other sprites I have interpolated in other parts of my code which are not looping.