Why is the SVG sprite icon not showing?

Question

SVG

I have a sprite like this:

<div id="sprite" style="display: none">
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <symbol id="arrow-main-slider" viewBox="0 0 26 39">
                <g opacity="0.3" filter="url(#filter0_d)">
                <path d="M4 17.4999C4 16.9444 4.21608 16.3889 4.64734 15.9653L18.225 2.63594C19.0888 1.78802 20.4891 1.78802 21.3525 2.63594C22.2158 3.48352 22.2158 4.858 21.3525 5.70599L9.33817 17.4999L21.3521 29.294C22.2154 30.1419 22.2154 31.5162 21.3521 32.3637C20.4887 33.2121 19.0883 33.2121 18.2246 32.3637L4.64693 19.0346C4.21559 18.6108 4 18.0553 4 17.4999Z"/>
                </g>
                <defs>
                <filter id="filter0_d" x="0" y="0" width="26" height="39" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                <feOffset dy="2"/>
                <feGaussianBlur stdDeviation="2"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
                </filter>
                </defs>
                </symbol>
          </svg>
    </div>

I display the icon from the sprite as follows:

<svg class="icon-svg">
     <use xlink:href="#arrow-main-slider"></use>
 </svg>

The icon is not displayed. I suspect that this is due to the filter that is built into the sprite Help solve the problem, because of which the icon from the sprite is not displayed.
<g opacity="0.3" filter="url(#filter0_d)">