<p dir="auto">Cannot style the expandalble Icon button<br>
version 0.18.1 by npm</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">This is my code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class TaskCard  extends React.Component {
  constructor(props){
    super(props);
 }
  render(){
  const {data}=this.props;
  return (
  &lt;Card &gt;
    &lt;CardHeader
      title={this.props.title}
      subtitle= {data.FixDetails}
      actAsExpander={true}
      showExpandableButton={true}
      avatar={
              &lt;div style={{display:'inline'}}&gt;
              &lt;FontIcon className=&quot;material-icons&quot; style={{marginRight:'15px'}} &gt;play_arrow&lt;/FontIcon&gt;
              &lt;FontIcon className=&quot;material-icons&quot; color={getSevrityColor(data.Sevirity)} &gt;error&lt;/FontIcon&gt;
              &lt;/div&gt;
              }
      style={{display:'inline-block',width:'80%'}}
      iconStyle={{margin:'0px'}}
    /&gt;
    &lt;CardActions style={{display:'inline-block'}}&gt;`
//buttons
    &lt;/CardActions&gt;
    &lt;CardText expandable={true} &gt;
      {data.FixDetails}
    &lt;/CardText&gt;
  &lt;/Card&gt;
  )
}`
};"><pre class="notranslate"><code class="notranslate">class TaskCard  extends React.Component {
  constructor(props){
    super(props);
 }
  render(){
  const {data}=this.props;
  return (
  &lt;Card &gt;
    &lt;CardHeader
      title={this.props.title}
      subtitle= {data.FixDetails}
      actAsExpander={true}
      showExpandableButton={true}
      avatar={
              &lt;div style={{display:'inline'}}&gt;
              &lt;FontIcon className="material-icons" style={{marginRight:'15px'}} &gt;play_arrow&lt;/FontIcon&gt;
              &lt;FontIcon className="material-icons" color={getSevrityColor(data.Sevirity)} &gt;error&lt;/FontIcon&gt;
              &lt;/div&gt;
              }
      style={{display:'inline-block',width:'80%'}}
      iconStyle={{margin:'0px'}}
    /&gt;
    &lt;CardActions style={{display:'inline-block'}}&gt;`
//buttons
    &lt;/CardActions&gt;
    &lt;CardText expandable={true} &gt;
      {data.FixDetails}
    &lt;/CardText&gt;
  &lt;/Card&gt;
  )
}`
};
</code></pre></div>
<p dir="auto">which I render through map<br>
<code class="notranslate">data.Tasks.map((x,i) =&gt; &lt;TaskCard  key={i} data={x} Tags={x.Tags} title={x.Tags.origin} subtitle={x.Type}/&gt;)</code></p>
<p dir="auto">The error I get is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: Unknown prop `iconStyle` on &lt;div&gt; tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardHeader)
    in CardHeader (created by TaskCard)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by TaskCard)
    in TaskCard (created by tasks)
    in div (created by List)
    in List (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in tasks (created by Unknown)
    in div (created by Page)
    in TweenOne (created by QueueAnim)
    in div (created by QueueAnim)
    in QueueAnim (created by Page)
    in div (created by Page)
    in Page (created by Connect(Page))
    in Connect(Page) (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by Unknown)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in section (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in MainAppLoggedIn (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by BaseDashboard)
    in BaseDashboard (created by Connect(BaseDashboard))
    in Connect(BaseDashboard) (created by Unknown)
    in div (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Unknown)
    in Unknown (created by Unknown)
    in Unknown
    in Provider
"><pre class="notranslate"><code class="notranslate">Warning: Unknown prop `iconStyle` on &lt;div&gt; tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardHeader)
    in CardHeader (created by TaskCard)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by TaskCard)
    in TaskCard (created by tasks)
    in div (created by List)
    in List (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in tasks (created by Unknown)
    in div (created by Page)
    in TweenOne (created by QueueAnim)
    in div (created by QueueAnim)
    in QueueAnim (created by Page)
    in div (created by Page)
    in Page (created by Connect(Page))
    in Connect(Page) (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by Unknown)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in section (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in MainAppLoggedIn (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by BaseDashboard)
    in BaseDashboard (created by Connect(BaseDashboard))
    in Connect(BaseDashboard) (created by Unknown)
    in div (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Unknown)
    in Unknown (created by Unknown)
    in Unknown
    in Provider

</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">When clicking on the TableSortLabel I would expect to see the aria-label change value to be "ascending" or "descending" for that  element it nested inside of.  It would look something like this example here: <a href="https://dequeuniversity.com/library/aria/tables/sf-sortable-grid" rel="nofollow">https://dequeuniversity.com/library/aria/tables/sf-sortable-grid</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19170080/33954892-bc0352b8-e007-11e7-9ddf-2f21804cde18.png"><img src="https://user-images.githubusercontent.com/19170080/33954892-bc0352b8-e007-11e7-9ddf-2f21804cde18.png" alt="screen shot 2017-12-13 at 1 15 38 pm" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">What currently renders is  elements without any aria-sort attribute like so:<br>
<a href="https://material-ui.com/demos/tables/" rel="nofollow">https://material-ui.com/demos/tables/</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/19170080/33955035-392c604a-e008-11e7-9dde-2163ad564044.png"><img src="https://user-images.githubusercontent.com/19170080/33955035-392c604a-e008-11e7-9dde-2163ad564044.png" alt="screen shot 2017-12-13 at 1 16 26 pm" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Visit: <a href="https://material-ui.com/demos/tables/" rel="nofollow">https://material-ui.com/demos/tables/</a></li>
<li>Goto "Sorting &amp; Selecting"</li>
<li>Click on any of the header columns</li>
<li>Inspect the  element and look at the attributes</li>
</ol>
<h2 dir="auto">Context</h2>

<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">I'm wondering if there would be approval for adding this in? I wouldn't mind taking on the work.  Looking at the code a rough idea for how this could work could be the fact that I know inside &lt;Table&gt; component there is a context property of 'head' that is a boolean. Knowing that information, I could use it later on inside of tableCell to set the appropriate aria-sort value. When one of the columns changes ordering the rest of the columns need to reflect that change and set their aria-sort status to "none" so there would need to be a function inside of &lt;Table&gt; that would signal a change to all the other table header columns.</p>