SVG defintions and "use" produce overlapping graphics - html

Question

The definitions look like this:
<svg style="display: none;">
<defs>
<symbol id="icon-1" viewBox="0 0 32 32">
<path ...
</symbol>
<symbol id="icon-2" viewBox="0 0 32 32">
<path ...
</symbol>
...
</svg>
and they are used like this:
<svg class="icon"><use xlink:href="#icon-2" /></svg>
The icons are shown but all of them at once, overlapped. I thought it's because they have the same viewBox, so I changed the y coordinate for each icon like this:
0 0 32 32
0 32 32 32
0 64 32 32
...
But then no icon shows up. Am I missing something?

Answer 1

It would help if you could provide a Minimal, Complete, and Verifiable example in your question. I can't see anything wrong with this approach. The following example works just fine:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="display: none;">
<defs>
<symbol id="icon-1" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="12" fill="#f00" />
</symbol>
<symbol id="icon-2" viewBox="0 0 32 32">
<path d="m4 4h24v24h-24v-24z" fill="#00f" />
</symbol>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<use xlink:href="#icon-1" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<use xlink:href="#icon-2" />
</svg>