API значков меню antd не работает. Не отображает

Question

Я пытаюсь отобразить боковое меню с подменю, однако вскоре я понимаю, что api значка не работает:

                  <Menu.Item key="1" >
                        <HomeOutlined />
                        <span>Home</span>
                        <Link to='/' />
                    </Menu.Item>

Это один из пунктов меню, он отображается правильно, если я поместите значок в menu.item. Однако, когда я это сделаю:

                   <Menu.Item key="1" icon={<HomeOutlined/>}>
                        <span>Home</span>
                        <Link to='/' />
                    </Menu.Item>

Значок больше не отображается. У меня нет проблем с первым подходом, однако, когда я пытаюсь трансплантировать 1-й подход в подменю:

             <SubMenu key="sub1" title="Settings">
                        <SettingFilled />
                    <Menu.Item key="7" onClick={this.props.logout}>
                        <span>Logout</span>
                    </Menu.Item>
                    </SubMenu>

Он отображает значок внутри внутреннего раскрывающегося списка вместо того, где он должен быть

Answer 1

Вы можете попробовать это, значок должен быть частью параметра заголовка, чтобы значок отображался правильно, когда меню не раскрыто. : -)

  <SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
        <SettingFilled />
        <Menu.Item key="7" onClick={this.props.logout}>
             <span>Logout</span>
        </Menu.Item>
  </SubMenu>