CSS psuedo element not showing svg background image

Question

I'm currently trying to use an svg from a local file within a psuedo element ::after I'll add my code below and what I see in the inspector about why it is not showing. PNGs work but not svgs.

  .select-box {
    position: relative;
    width: 70px;
    svg {
      position: absolute;
      top: -12px;
      right: 0;
    }
&:after {
      display: block;
      content: '';
      background-image: url('../assets/icons/arrow_dropdown.svg');
      background-size: 28px 28px;
      height: 28px;
      width: 28px;
    }
    select {
      width: 100%;
      height: 32px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      border-bottom: 2px solid #808080;
      -webkit-appearance: none;
      appearance: none;
      &:focus {
        outline: none;
      }
    }
  }

SVG File:

<svg xmlns="http://www.w3.org/2000/svg" width="12.707" height="7.061" viewBox="0 0 12.707 7.061">
  <path id="Path_9731" data-name="Path 9731" d="M0,12,6,6,0,0" transform="translate(12.354 0.354) rotate(90)" fill="none" stroke="#000" stroke-width="1"/>
</svg>

Answer 1

What ended up working for me was install vue-svg-loader and adding ?external to the end of the svg path.