How to set a background for an svg image? How to apply z-index to ::before and ::after?

Question

css

There is an svg icon, you need to set a red background. The svg itself is loaded via CSS. Question: How can I set a background for this svg image? I tried to set the z-index, it does not work ...

.owl-prev, .owl-next
  position: absolute
  z-index: 3
  top: 50%
  border-radius: 25px
  height: 18px
  width: 18px
  margin: 11px 35px
  background-image: url("../img/favicon/arrow-slide.svg")
  background-size: contain

    &::before
      content: ""
      position: absolute
      z-index: 2
      background: #000
      width: 48px
      height: 48px

Answer 1

Isn't it easier to write fill in svg: #fff;

Answer 2

And what's the problem with setting background-color along with svg?