Fill color based on parent?

&--negative {
  color: red;

  &::before {
    display: inline-flex;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -15%;
    content: url(
      "data:image/svg+xml, 
      <svg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 18 18'><path d='M5 8l4 4 4-4z'/></svg>");
  }
}

By having the code above, we can add a svg before content, which works great. My question is it seems like fill='currentColor' isnt really working? Ultimately I wish to make svg fill color based on parent, which in above case, color coming from &--negative class

UPDATES

I've created a codepen as code sample, if you noticed I've changed to fill='currentColor'