How to recolor icon via svg > use?

Question

css

I'm using the gulp-svg-sprite plugin to generate sprites. Everything collects, works as it should. But when I insert an element into the page

<svg class="qualities-list__img" width="78" height="78">
    <use xlink:href="#ico-qualities-1"></use>
  </svg>

then when I try to change the color by specifying fill or stoke, it does not change and nothing happens at all

Answer 1

Bad icon.
It was worth processing in a chandelier, it takes a couple of minutes.

icon code

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M248.4,0c4.9,0,9.8,0,14.8,0c0.9,0.1,1.8,0.4,2.7,0.4c15.5,0.4,30.7,2.5,45.8,5.8c29.2,6.5,56.5,17.8,81.8,33.9
    c0.5,0.3,1.1,0.6,1.7,0.9c4.7-4.7,9.4-9.4,14-14c12.3-12.3,31.2-12.4,43.5-0.2c11,10.8,21.9,21.7,32.7,32.7
    c7.9,8,10.4,17.6,8.1,28.5c-1.2,5.7-4,10.6-8.1,14.6c-3,3-7.4,3.7-11.2,1.9c-3.7-1.7-5.9-5.4-5.7-9.5c0.2-2.7,1.4-4.8,3.1-6.8
    c3.9-4.4,3.9-10.5-0.2-14.7c-10.9-11-21.9-22-32.9-32.9c-4.4-4.4-10.7-4.2-15.2,0.2c-3.6,3.5-7.1,7.1-10.6,10.6
    c-0.4,0.4-0.6,0.9-0.9,1.2c52,41.3,85.1,94,96.3,159.5c11.2,65.4-1.5,126.4-36.9,182.7c0.5,0.5,0.9,1,1.3,1.5
    c4.2,4.2,8.3,8.4,12.5,12.6c12.4,12.4,12.4,31.3,0.1,43.6c-10.8,10.8-21.5,21.6-32.4,32.3c-7.9,7.8-17.4,10.6-28.2,8.5
    c-5.9-1.1-10.9-3.9-15.1-8.2c-5.4-5.6-2.9-14.7,4.6-16.6c3.6-0.9,6.7,0.1,9.5,2.6c4.8,4.3,10.7,4.1,15.2-0.3
    c10.8-10.8,21.6-21.6,32.3-32.4c0.9-0.9,1.6-1.9,2.2-2.9c2.1-4.1,1.5-8.8-1.9-12.3c-3.6-3.8-7.4-7.4-11.1-11.2
    c-0.2-0.2-0.5-0.4-0.8-0.6c-41.2,52-94,85.1-159.6,96.4c-65.5,11.3-126.6-1.6-182.9-37c-0.6,0.5-1.1,1-1.7,1.5
    c-4.1,4.1-8.1,8.1-12.2,12.2c-12.7,12.5-31.4,12.5-44-0.1c-10.6-10.6-21.2-21.2-31.8-31.8c-7.3-7.3-10.4-16.1-9.1-26.4
    c0.9-6.7,3.8-12.5,8.7-17.3c2.8-2.8,6.2-3.5,10-2.3c3.6,1.2,5.9,3.8,6.6,7.6c0.7,3.4-0.3,6.3-2.7,8.8c-2.1,2.3-3.2,4.9-3.1,8
    c0.1,3.2,1.6,5.6,3.7,7.8c10.5,10.5,21,21,31.5,31.5c0.3,0.3,0.7,0.7,1.1,1c4.3,3.7,10.2,3.8,14.3-0.1c4.1-3.8,7.9-7.9,11.8-11.8
    c0.1-0.1,0.1-0.3,0.1-0.4c-51.9-41.3-85-94.1-96.3-159.6c-11.2-65.5,1.8-126.4,37-182.7c-0.6-0.6-1.1-1.2-1.7-1.8
    c-4.1-4.1-8.1-8.1-12.2-12.2c-12.4-12.5-12.4-31.4,0-43.8C37.7,48.5,48.4,37.9,59,27.3c5.2-5.3,11.4-8.5,18.8-9.3
    c9.8-1,18.3,2,25.2,9.1c2.1,2.2,2.9,4.9,2.5,7.9c-0.5,3.8-2.6,6.5-6.2,7.9c-3.7,1.4-7.1,0.8-10.1-1.7c-0.2-0.2-0.4-0.3-0.6-0.5
    c-4.9-4.3-10.7-4.2-15.4,0.4C62.6,51.7,52.1,62.4,41.3,72.8c-4.5,4.4-5,11.7,0,16.4c3.4,3.2,6.6,6.6,9.9,9.9c0.4,0.4,1,0.8,1.4,1.2
    c0.2-0.2,0.4-0.3,0.5-0.4c0.6-0.8,1.2-1.5,1.8-2.3c29.5-37.1,66.4-64.2,110.7-81.1c25.9-9.9,52.8-15.3,80.6-16.1
    C247,0.4,247.7,0.1,248.4,0z M113.5,256.1c-0.1,78.3,63.5,141.9,141.3,142.5c79.1,0.7,143.9-63.5,143.8-142.5
    c0-78.8-64.1-142.9-142.7-142.7C177,113.7,113.5,177.3,113.5,256.1z M309.9,486c42.8-10.3,79.9-30.6,111.2-61.2
    c32.7-32,54.2-70.3,65-115.2c-1.3,0-2.2,0-3,0c-18.1,0-36.2,0-54.4,0c-1,0-2,0-2.9-0.1c-4.7-0.4-8.3-4-8.9-8.8
    c-0.5-4.4,2.3-9,6.6-10.4c1.5-0.5,3.1-0.6,4.6-0.6c19.5,0,39,0,58.6,0c1,0,1.9,0,3.1,0c3.2-22.7,3.2-45.2,0-67.6
    c-5.6-0.6-72.7-0.3-74.6,0.3c7.6,39.8,2.4,77.7-17.6,113.1c-20,35.4-49.6,59.7-87.7,73.7C309.9,434.8,309.9,460.2,309.9,486z
     M289.7,415c-39.9,7.6-77.8,2.5-113.2-17.5c-35.5-20-59.8-49.6-74-87.9c-0.8,0-1.7,0-2.5,0c-24.5,0.1-49,0.1-73.5,0.2
    c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.1-0.2,0.4c7.6,32.1,21.4,61.5,41.4,87.9c23.2,30.7,52.3,54.3,87,71
    c15.2,7.3,31,12.9,47.8,16.7c0-1.4,0-2.3,0-3.3c0-18.1,0-36.2,0-54.4c0-0.7,0-1.5,0-2.2c0.4-5.1,4.4-9.1,9.4-9.3
    c5.2-0.2,9.5,3.4,10.2,8.6c0.2,1.2,0.2,2.5,0.2,3.7c0,19.2,0,38.4,0,57.5c0,1,0,1.9,0,3.1c22.7,3.2,45.1,3.2,67.5,0
    C289.7,464.7,289.7,439.9,289.7,415z M202.2,26.3c-86.5,19-157.3,90.8-175.9,176c1,0,2,0,3,0c18.1,0,36.2,0,54.4,0
    c0.8,0,1.6,0,2.5,0c5,0.4,8.7,4.1,9.3,8.9c0.5,4.5-2.3,8.9-6.7,10.3c-1.4,0.4-2.9,0.5-4.4,0.5c-19.7,0-39.4,0-59,0
    c-0.9,0-1.9,0.1-2.8,0.1c-3.3,16.1-3.2,58.8,0.2,67.5c24.7,0,49.5,0,74.4,0c-7.7-39.9-2.5-77.8,17.5-113.2
    c20-35.5,49.6-59.8,87.7-73.8C202.2,77.1,202.2,51.7,202.2,26.3z M222.3,97c39.9-7.7,77.8-2.5,113.2,17.5
    c35.4,20,59.7,49.5,73.8,87.5c3.5,0.5,74.7,0.3,76.4-0.2c-19.2-86.5-90.9-157-176-175.6c0,1,0,2,0,2.9c0,18.1,0,36.2,0,54.4
    c0,1,0,2-0.1,2.9c-0.5,4.9-4.4,8.6-9.4,8.8c-4.7,0.2-9-3-10-7.7c-0.3-1.3-0.3-2.6-0.3-3.9c0-19.5,0-39,0-58.5
    c0-0.9-0.1-1.9-0.1-2.8c-19.4-3.2-58-3-67.4,0.2C222.3,47.3,222.3,72.1,222.3,97z"/>
</svg>

Answer 2

Apparently, fill or stroke is already specified in the code of the icon itself and overrides the styles that you specify. These attributes must be removed from the icon code before being assembled into a sprite (manually or using tools like svgo). You can also replace the value of these attributes with currentColor and then specify the color property in the css for the icon, which will correspond to the currentColor value.