antd menu icons API not working. Does not render

Question

im trying to render a a side menu with a submenu , however i soon realize that the icon api is not working:

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

This is one of the menu items , it renders correctly if i were to place the icon within the menu.item. However when i do this :

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

The icon no longer shows. I have no issues for the first approach , however when i try to tranplant the 1st approach to a submenu :

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

It would render the icon inside the inner dropdown instead of where its supposed to be

Answer 1

You can try this, the icon has to be part of the title parameter in order for the icon to be shown correctly when the menu is not expanded. :-)

  <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>