• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

ListItem should consistently either render a <li> or not render a <li>

Current Behavior

When adding a ListItemSecondaryAction into the ListItem a <li> is automatically added. If I render a list where some items should have an icon and some do not, this element structure becomes inconsistent.

Steps to Reproduce

Link: https://codesandbox.io/s/20w105myyy

1. Open Browser DevTools and inspect the DOM structure or the children to the <ul>s.

Context

I'm trying to make a generic ListItemLink helper that wraps the content inside a ListItem and a NavLink like this:

class ListItemLink extends Component {
  render() {
    const { classes, to, children } = this.props;

    return (
      <ListItem button component={NavLink} to={to} activeClassName={classes.active}>
        {children}
      </ListItem>
    );
  }
}

But since I use component property I override the default use of <li>, however, when adding the ListItemSecondaryAction inside of it a <li> is added. I assume that this is somehow related to #10452, but cannot understand how to fix it. Is this a bug? If not, how can I work aroun this issue when I do not know beforehand if the content will contain a ListItemSecondaryAction?

Your Environment