How to color an SVG icon?

Question

css

Good evening.
There is an SVG symbol which is further inserted and used via use. In general, a standard set. But there is one "but" - it does not react to the color property, at all. The icon is simply a ring created through the path tag (yes, I know that path is not used for circles, but the icons were made through illustrator by converting paths from Photoshop, and I don’t want to mess around with the generated code - we work with what we have) .
I read that it is necessary to remove the fill, stroke attributes, because they take precedence over css. OK well. But the behavior becomes incomprehensible and inadequate:
- if I remove the stroke from the path element, all visible elements disappear
- if I remove the fill attribute too, I get a solid circle, but I need a ring
- in all the above cases, nothing reacts to the css-rule with color
How to color the icon through css? Fiddle of the whole thing.

Answer 1

https://jsfiddle.net/nfkub464/
- in all of the above cases, nothing reacts to the css-rule with color
everything is correct, because it is responsible for the color of the text
if you need to control the color through color, you can do this
https://jsfiddle.net /cfdg0q0n/1/

Answer 2

It can be so if necessary
.

icon {
  color: red;
}

svg use {
  fill: currentColor;
}

just need to remove fill="none" in SVG