antd menu icons API not working. Does not render - antd

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>

Answer 2

You can do this: -
<SubMenu key="sub1" title={<span><UserOutlined /><span>Settings</span></span>}>
<SettingFilled />
<Menu.Item key="7" onClick={this.props.logout}>
<span>Logout</span>
</Menu.Item>
But there will be an issue of padding as the padding of Menu.Item is given relative to the title of the Sub-Menu and the padding is given as inline-css so you will not be able to override the css and it's a bad habit to use important. Here, you are using so if you want the content aligned than you can give padding to the Link.