How to change ::marker SVG color in CSS?-CodePudding

I have an SVG li::marker, and I would like to change the color depending on the font color. I was thinking to use it like this, where I put fill="currentColor" but this is not working. How could I fix this?

li::marker {
    content: url("data:image/svg xml,
");
}

I also tried to import the icon with an URL, but same:

li::marker {
    content: url(/assets/images/icons/list-marker.svg);
}

<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z" fill="currentColor"/>
</svg>

Thanks!

CodePudding user response：

By using the property content in css, you get a string without SVG tags and properties. Try this approach with additional color classes.

body {
  color: aliceblue;
  background-color: hsl(201, 27%, 10%);
}

li {
  padding-inline-start: 0.5rem;
  margin-block: 0.2rem;
}
li.pink strong {
  color: #ea4c89;
}
li.orange strong {
  color: #f49d37;
}
li.purple strong {
  color: #a16cf4;
}

li::marker {
  /* Replace fill attribute color # => #, example: #fff => #fff */

  --pink-fill: url("data:image/svg xml,
");
  --orange-fill: url("data:image/svg xml,
");
  --purple-fill: url("data:image/svg xml,
");
}
li.pink::marker {
  content: var(--pink-fill);
}
li.orange::marker {
  content: var(--orange-fill);
}
li.purple::marker {
  content: var(--purple-fill);
}

<ul>
  <li ><strong>Color: </strong>Frandango Pink</li>
  <li ><strong>Color: </strong>Carrot Orange</li>
  <li ><strong>Color: </strong>Medium Purple</li>
</ul>