Динамически добавлять svg спрайт

Столкнулся с проблемой, что когда динамически добавлять svg спрайт то он не показывается, то есть svg и внутренний тег use видны в консоли, а вот в use не отображается #shadow-root, как это можно поправить? Скрипт у меня создает выпадающий лист, если в Li есть еще список то ему добавлять стрелку с svg

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="arrowRight" viewBox="0 0 240.823 240.823">
                        <path d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179
                            l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261
                            C187.881,124.315,187.881,116.495,183.189,111.816z"/>
                    </symbol>
</svg>

js:

function menu() {
        var elemUl = document.querySelectorAll(".sr-filter__options li > ul"),
            elemTag = document.querySelectorAll(".sr-filter__options li > span");
        for (var i = 0; elemUl.length > i; i++) {
            elemUl[i].parentNode.classList.add("collapsed");
            var arrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            var svgTag = document.createElementNS("http://www.w3.org/2000/svg", "use");
            svgTag.setAttribute("xlink:href", "#arrowRight");
            arrowSvg.appendChild(svgTag);
            arrowSvg.classList.add("sr-filter__options-arrow");
            elemUl[i].parentNode.querySelector("span").appendChild(arrowSvg);
        }
        for (var j = 0; elemTag.length > j; j++) {
            elemTag[j].onclick = function() {
                var elemHasClass = this.parentNode.classList.contains("collapsed"),
                    elemHasUl = this.parentNode.getElementsByTagName('ul').length > 0;
                if (elemHasUl) {
                    if (elemHasClass) {
                        this.parentNode.classList.remove("collapsed");
                        this.parentNode.classList.add("expanded");
                    } else {
                        this.parentNode.classList.add("collapsed");
                        this.parentNode.classList.remove("expanded");
                    }
                    return false;
                } else {
                    var elemOpen = this.parentNode.parentNode.querySelectorAll(".expanded");
                    for (var k = 0; elemOpen.length > k; k++) {
                        elemOpen[k].classList.remove("expanded");
                        elemOpen[k].classList.add("collapsed");
                    }
                }
            };
        }
    }
    menu();
html:
<ul class="sr-filter__options"></ul>