How to create SVG seperate Sprite file - html

Question

I am facing an issue while creating SVG sprites
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="search-grey" viewBox="0 0 26.05 26.05">
<defs>
<style>.cls-1,.cls-2{fill:none}.cls-2{stroke:gray;stroke-linejoin:round}.cls-3{clip-path:url(#clip-path)}.cls-4{clip-path:url(#clip-path-2)}.cls-5{fill:url(#linear-gradient)}</style>
<clipPath id="clip-path">
<path d="M17.88-116.52c-.73-1.93-5.48-7.79-7.55-7.79-2.57 0-6.79 3.83-11.73 2-6-2.17-5.18-10.32-11.91-13.18a33.36 33.36 0 0 1 3.73 1.31c-3.23-5.29-10.81-3.13-12.43-.81-.25.92 1.61 2.6 3.18 3.71 1.43 2 1.6 2.18.43 5.71s7.8 2.39 10.29 5.11c2.69 3 5.77 5.3 9.9 6.17a2.46 2.46 0 0 1 .39.09c.83 2 7.23 7.62 16.46 10.34-1.34-1.55 0-10.78-.76-12.7" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-2">
<path d="M-248.64-137.83H222.2v80.44h-470.84z" class="cls-1"/>
</clipPath>
<linearGradient id="linear-gradient" x1="-49.74" x2="-49.36" y1="255.49" y2="255.49" gradientTransform="scale(-34.13 34.13) rotate(62.12 190.304 167.061)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".01" stop-color="#fdfcf9"/>
<stop offset=".17" stop-color="#e9dbbe"/>
<stop offset=".32" stop-color="#d7bf8b"/>
<stop offset=".47" stop-color="#c9a961"/>
<stop offset=".62" stop-color="#be9741"/>
<stop offset=".76" stop-color="#b68a2a"/>
<stop offset=".89" stop-color="#b2831c"/>
<stop offset="1" stop-color="#b08017"/>
</linearGradient>
</defs>
<circle cx="10.58" cy="10.58" r="10.08" class="cls-2"/>
<path d="M18.14 18.14l7.56 7.56" class="cls-2"/>
<g class="cls-3">
<g class="cls-4">
<path d="M258.66-120.24L119.27 120.02-285.11-74.97l139.39-240.27 404.38 195z" class="cls-5"/>
</g>
</g>
</symbol>
</svg>
above is my svg sprite file named "svg-sprites.svg"
in the HTML I use this code
<svg viewBox="0 0 26.05 26.05" class="icon"><use xlink:href="#search-grey"></use></svg>
but it is not properly displaying the icon as i created in Illustrator.
I can't figure out why it is not working.