React多级下拉菜单添加图标实现及react-multilevel-dropdown使用疑问

补充CSS适配方案 #

@the_previ 的回答是可行的，但需要额外添加部分CSS来达到预期效果。以下是通过Material UI的makeStyles添加的CSS代码，也可以存放在外部CSS文件中直接使用：

dropdownIcon: {
    background: "url(/images/down-chevron.png) no-repeat",
    backgroundSize: "20px",
    backgroundPosition: "left",
    paddingLeft: "30px",
  },

实现效果如下：

问题背景与需求 #

菜单开发是非常普遍的需求，目前我使用react-multilevel-dropdown库开发组件，它的功能完全匹配我的需求，现有组件代码如下：

<Dropdown position="right" title="Todos os departamentos">
  <Dropdown.Item>Item 1</Dropdown.Item>
  <Dropdown.Item>
    Item 2
    <Dropdown.Submenu position="right">
      <Dropdown.Item>Subitem 1</Dropdown.Item>
      <Dropdown.Item>Subitem 2</Dropdown.Item>
    </Dropdown.Submenu>
  </Dropdown.Item>
  <Dropdown.Item>Item 3</Dropdown.Item>
</Dropdown>

当前实现的多级菜单效果如下：

我现在需要在菜单标题的开头位置添加图标，但该组件的title属性仅支持字符串类型。我不强制使用该库，只要能实现同等功能且支持添加图标的方案都可以。

内容的提问来源于stack exchange，提问作者zhyp