CSS 疑似要素の ::before や ::after は文字だけでなく，SVG を指定することもできます．

クラスを指定するだけでデザインが適用できるので，毎回 HTML ソースに追加するような手間なく SVG を使用できるようになるので超楽です．

大きさ指定不要の場合

最も簡単なのは content に直接 URL を指定してしまうことです．

url() を使用することで，SVG ファイルを相対パスで呼ぶことができます．

p::before {
  content: url("../assets/example.svg");
}

しかし，この方法では SVG のサイズを変更することができません．

大抵の場合は大きさを変更しないと見た目が大変なことになるので，次の方法を使います．

大きさ指定する場合

content ではなく，background-image として SVG を読み込むと，大きさを指定することができるようになります．

（縦横比が同じ場合の例）

p::before {
  content: "";
  background-image: url("../assets/example.svg");
  display: inline-block;
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
}

画像を指定することができるコードに SVG を使用したものです．

色は黒になってしまうので，変更したい場合は mask を使います．

大きさと色を指定する場合

色は background-color で指定します．

p::before {
  content: "";
  background-color: #00ffff;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  -webkit-mask: url("../assets/example.svg");
  mask: url("../assets/example.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  vertical-align: middle;
}

ちなみに，縦横比が 1:1 でない場合は calc() で調整すればうまく表示できます．

参考

Change SVG fill color in or CSS | Stack Overflow