{"action":"closed","issue":{"url":"https://api.github.com/repos/callemall/material-ui/issues/3654","repository_url":"https://api.github.com/repos/callemall/material-ui","labels_url":"https://api.github.com/repos/callemall/material-ui/issues/3654/labels{/name}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/3654/comments","events_url":"https://api.github.com/repos/callemall/material-ui/issues/3654/events","html_url":"https://github.com/callemall/material-ui/issues/3654","id":139902357,"number":3654,"title":"[ListItem] Add the ability to change the colour of the nested indicator icon","user":{"login":"adrianmc","id":943555,"avatar_url":"https://avatars.githubusercontent.com/u/943555?v=3","gravatar_id":"","url":"https://api.github.com/users/adrianmc","html_url":"https://github.com/adrianmc","followers_url":"https://api.github.com/users/adrianmc/followers","following_url":"https://api.github.com/users/adrianmc/following{/other_user}","gists_url":"https://api.github.com/users/adrianmc/gists{/gist_id}","starred_url":"https://api.github.com/users/adrianmc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adrianmc/subscriptions","organizations_url":"https://api.github.com/users/adrianmc/orgs","repos_url":"https://api.github.com/users/adrianmc/repos","events_url":"https://api.github.com/users/adrianmc/events{/privacy}","received_events_url":"https://api.github.com/users/adrianmc/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/callemall/material-ui/labels/Enhancement","name":"Enhancement","color":"006b75"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-03-10T14:26:42Z","updated_at":"2016-04-25T15:50:05Z","closed_at":"2016-04-25T15:50:05Z","body":"This is a feature request/discussion concerning this component: http://www.material-ui.com/#/components/list\r\n\r\nI came across this problem while trying to implement a dark theme. For the list component, I was able to easily set the background colour to be a dark colour as well as change the text to a light colour to maintain contrast.\r\n\r\nHowever, a problem arises, when I have a nested list item. The nested indicator icon seems to only display in a dark colour, making it hard for the user to see it on a dark background.\r\n\r\nSee picture here:\r\n![dark indicator](https://github.com/adrianmc/adrianmc.github.io/blob/master/public/assets/Screen%20Shot%202016-03-10%20at%2010.18.36%20PM.png?raw=true)\r\n\r\nLines 606 and 607 of `list-item.jsx` shows us that this is because it's rendering the default icon component whenever the list is being collapsed or expanded.\r\n\r\n```jsx\r\n      // Create a nested list indicator icon if we don't have an icon on the right\r\n      if (needsNestedIndicator) {\r\n        rightIconButtonElement = this.state.open ?\r\n          <IconButton><OpenIcon /></IconButton> :\r\n          <IconButton><CloseIcon /></IconButton>;\r\n        rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle;\r\n      }\r\n```\r\nSee source [here](https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js).\r\n\r\nI can override the icon by using the rightIcon prop, but it no longer flips up and down due to the fact that it's just a static icon.\r\n\r\nMy proposal is to add a `nestedIndicatorColor` prop so we can control the way the \"generated\" indicator looks on dark backgrounds.\r\n\r\nThoughts? If there is support, I will attempt a pull-request."}}