如何创建一个自定义下拉列表，通过图标显示所选项目？

<div class="custom-select">
  <select id="my-select">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  <span class="selected-icon"></span>
</div>

.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
}

.custom-select .selected-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("icon.png");
  background-size: cover;
}

var select = document.getElementById("my-select");
var icon = document.querySelector(".selected-icon");

select.addEventListener("change", function() {
  var selectedOption = select.options[select.selectedIndex];
  var iconUrl = selectedOption.getAttribute("data-icon");
  icon.style.backgroundImage = "url(" + iconUrl + ")";
});