antd menu icons API not working. Does not render

user_12705034 0
Viewed 575

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

antd
2 Answers

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

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.

user_177941580
Related