SVGアイコンを使用した前後について

CSSの:beforeと:afterを使用する方法:

CSSの:beforeと:after疑似要素を使用して、要素の前後にSVGアイコンを表示することができます。

<style>
  .icon {
    position: relative;
  }
  .icon:before,
  .icon:after {
    content: url('icon.svg');
    position: absolute;
  }
  .icon:before {
    left: -20px; /* アイコンを要素の前に配置 */
  }
  .icon:after {
    right: -20px; /* アイコンを要素の後に配置 */
  }
</style>
<div class="icon">要素</div>

HTMLのimg要素を使用する方法:

<style>
  .icon {
    display: inline-flex;
    align-items: center;
  }
  .icon img {
    margin-right: 5px; /* アイコンと要素の間にスペースを作成 */
  }
</style>
<div class="icon">
  <img src="icon.svg" alt="アイコン">
  要素
</div>

SVGのuse要素を使用する方法:

<svg>
  <defs>
    <symbol id="icon" viewBox="0 0 24 24">
      <path d="M12 2L3 15h18L12 2zm0 12h-2v2h2v-2zm0-8V6h-2v2h2z"/>
    </symbol>
  </defs>
</svg>
<div class="icon">
  <svg class="icon-svg">
    <use xlink:href="#icon"></use>
  </svg>
  要素
</div>

これらはSVGアイコンを要素の前後に配置するための基本的な方法です。実際の使用方法はデザインや要件によって異なりますが、上記の例を参考にしてカスタマイズしてください。