CSS / SCSS background image as marker for li via :before

Question

this is my first question so I hope its specific enough:

I want to enter a svg check mark sign (https://fonts.google.com/icons?icon.query=check&icon.style=Sharp) in front of each li item, instead of the marker (I already removed in ul).

When I enter it I cannot see the svg image, I can only see something when I enter background color and then not the svg just the background color in the area where the image should be. SVG file is saved in the folder and other svg files in the document work as well.

The code is the following:

ul {
  list-style-type: none;
  li {
    margin-bottom: 1em;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      background-image: url("icon-check3.svg");
      background-size: contain;
      background-position: center;
      margin-left: -3em;
    }
  }
}

Answer 1

Basically your code is correct. We're missing the svg itself to debug it. However I did include some check icon as a Static icon font.

li {
  margin-bottom: 1em;
  position: relative;
  list-style: none;
}

li:before {
  font-family: 'Material Symbols Sharp';
  content: "check";
  position: absolute;
  color: lightgreen;
  width: 2.5em;
  height: 2.5em;
  margin-left: -2em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />


<ul>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello</li>

</ul>