如何在<ul>标签中放置图标？

<ul class="icon-list">
  <li>图标1</li>
  <li>图标2</li>
  <li>图标3</li>
</ul>

.icon-list {
  list-style: none;
}

.icon-list li:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(图标路径) no-repeat;
  /* 其他样式属性 */
}

<ul>
  <li class="fa fa-home">首页</li>
  <li class="fa fa-user">个人中心</li>
  <li class="fa fa-envelope">消息</li>
</ul>

<ul>
  <li>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L3 14h9l-3 8 10-12h-9l3-8z"></path>
    </svg>
    图标1
  </li>
  <li>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L3 14h9l-3 8 10-12h-9l3-8z"></path>
    </svg>
    图标2
  </li>
  <li>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L3 14h9l-3 8 10-12h-9l3-8z"></path>
    </svg>
    图标3
  </li>
</ul>