Why are my SVGs showing properly in Chrome but not Firefox?-CodePudding

I am using SVG spriting to append SVGs to my page in JS:

const editIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
editIcon.classList.add('to-do-icon');
const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#edit');
editIcon.appendChild(use);

const deleteIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
deleteIcon.classList.add('to-do-icon');
const use2 = document.createElementNS("http://www.w3.org/2000/svg", "use");
use2.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'images/icons.svg#delete');
deleteIcon.appendChild(use2);

svgContainer.appendChild(editIcon);
svgContainer.appendChild(deleteIcon);

Svg Spriting file:

<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="delete">
    <path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"/></path>
  </symbol>
</svg>

I have styled them with explicit height, width and fill values so I don't think the issue is the that they are not visible or overflowing their containers. When I put a border on them and use event listeners they work just fine in both browsers. When I look at the dev tools in Chrome I can see that #shadow-root under 'use' tag is picking up the SVG reference correctly, however in Firefox there is nothing contained in #shadow-root. How can I fix this for firefox?

on Chrome one Firefox

CodePudding user response：

Thanks to zgood for the answer!

The path tags were doubled and the first path tag had no closing '/>'. Apparently Chrome handled invalid syntax better than Firefox.

Correct sprite file:

<svg width="0" height="0" class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <symbol id="edit">
    <path d="M 18.414062 2 C 18.158062 2 17.902031 2.0979687 17.707031 2.2929688 L 15.707031 4.2929688 L 14.292969 5.7070312 L 3 17 L 3 21 L 7 21 L 21.707031 6.2929688 C 22.098031 5.9019687 22.098031 5.2689063 21.707031 4.8789062 L 19.121094 2.2929688 C 18.926094 2.0979687 18.670063 2 18.414062 2 z M 18.414062 4.4140625 L 19.585938 5.5859375 L 18.292969 6.8789062 L 17.121094 5.7070312 L 18.414062 4.4140625 z M 15.707031 7.1210938 L 16.878906 8.2929688 L 6.171875 19 L 5 19 L 5 17.828125 L 15.707031 7.1210938 z"/>
  </symbol>
  <symbol id="delete">
    <path d="M 10 2 L 9 3 L 4 3 L 4 5 L 5 5 L 5 20 C 5 20.522222 5.1913289 21.05461 5.5683594 21.431641 C 5.9453899 21.808671 6.4777778 22 7 22 L 17 22 C 17.522222 22 18.05461 21.808671 18.431641 21.431641 C 18.808671 21.05461 19 20.522222 19 20 L 19 5 L 20 5 L 20 3 L 15 3 L 14 2 L 10 2 z M 7 5 L 17 5 L 17 20 L 7 20 L 7 5 z M 9 7 L 9 18 L 11 18 L 11 7 L 9 7 z M 13 7 L 13 18 L 15 18 L 15 7 L 13 7 z"/>
  </symbol>
</svg>