Why are svg icons not showing through css?

Question

css

Hello.
Why are svg icons not showing through css?
If you open the icon simply in the browser, then it is displayed, if you put it through the styles, then for some reason it is not displayed, it is also not displayed in the developer tools, but if you open it in a new tab, then it is.
There is an example .
In this example, there are two svg files, one is displayed correctly, the second is not, what is the reason?

Answer 1

in css, the url() function specifies either an absolute path to the file, or a relative one, moreover, it is relative to the css file. For example, if the structure is:
css/style.css
img/icon.svg
then in css it will be

url('../img/icon.svg')

Answer 2

You can give an example to the studio what you did and what happens, SVG can be inserted both as a background and controlled through styles, its elements, namely path, stroke, fill and many others