Custom color for SVG bullet point

Question

I have the following CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

Which works fine with the HTML below

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

Now, I want to add a second list using the same check-mark but having different color.

So, I have updated my code as follows

HTML

   <ul class="blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

But the check-mark is still black. How can I have the check-marks in the blue list blue?

Answer 1

You cant change the color of the image with just color: blue; Maybe this will work:

ul.blue > li::before {
fill: blue;
}

Or just find another image with blue check mark and add it the same way like

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}