如何在Bootstrap下拉列表中垂直对齐由于前面不同宽度的图标而未对齐的元素？

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">
      <span class="icon"></span>
      选项1
    </a>
    <a class="dropdown-item" href="#">
      <span class="icon"></span>
      选项2
    </a>
    <a class="dropdown-item" href="#">
      <span class="icon"></span>
      选项3
    </a>
  </div>
</div>

.dropdown-item {
  display: flex;
  align-items: center;
}

.icon {
  width: 20px; /* 假设图标的宽度为20px */
  height: 20px; /* 假设图标的高度为20px */
  margin-right: 10px; /* 图标与文本之间的间距 */
}

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">
      <table>
        <tr>
          <td>
            <span class="icon"></span>
          </td>
          <td>
            选项1
          </td>
        </tr>
      </table>
    </a>
    <a class="dropdown-item" href="#">
      <table>
        <tr>
          <td>
            <span class="icon"></span>
          </td>
          <td>
            选项2
          </td>
        </tr>
      </table>
    </a>
    <a class="dropdown-item" href="#">
      <table>
        <tr>
          <td>
            <span class="icon"></span>
          </td>
          <td>
            选项3
          </td>
        </tr>
      </table>
    </a>
  </div>
</div>

.dropdown-item table {
  display: table;
  height: 100%;
}

.dropdown-item td {
  vertical-align: middle;
  padding-right: 10px; /* 图标与文本之间的间距 */
}