background-imageでSVGを表示する

div::after {
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%231f1f1f"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
}

div::after {
  display: block;
  width: 1em;
  height: 1em;
  content: "";
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%231f1f1f"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
}

@mixin svg($color) {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23#{$color}"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
}

@mixin svg($color) {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23#{$color}"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
}