title: Rotate an icon when containing Button is clicked
body: <p>I have a Material-UI button whose markup looks like this:</p>
  
  <pre><code>&lt;Button
    disableFocusRipple={true}
    disableRipple={true}
    color="inherit"
    onClick={openBlogMenu}
    className={classes.blogButtonStyle}
  &gt;
    &lt;LibraryBooksIcon /&gt;
    Blog
    {!blogMenu &amp;&amp; &lt;KeyboardArrowDownIcon /&gt;}
    {blogMenu &amp;&amp; &lt;KeyboardArrowUpIcon /&gt;}
  &lt;/Button&gt;
  &lt;BlogDropDown pageURL={pageURL} /&gt;
  </code></pre>
  
  <p>Here, the <code>openBlogMenu</code> changes the <code>blogMenu</code> Redux state which toggles <code>BlogDropDown</code> into view. As apparent, I'm also reading this state to toggle between the two arrow icons, <code>KeyboardArrowDownIcon</code> and <code>KeyboardArrowUpIcon</code>.</p>
  
  <p>So far, this setup works smooth. However, I'm keen on doing away with <code>KeyboardArrowUpIcon</code> altogether and instead, making <code>KeyboardArrowDownIcon</code> rotate 180 degrees upon click.</p>
  
  <p>I know it's as easy as just adding one of the available pseudo-classes, e.g., <code>:active</code> or <code>:focus</code> to the icon element. But then it'll only rotate if the icon itself is clicked rather than the entire button.</p>
  
  <p>I also understand one could just dynamically add a <code>transform</code> attribute (<code>transform: rotate(180deg);</code>) to the icon's CSS in the click handler, but that wouldn't animate the transition.</p>
  
  <p>Any tips?</p>
  
  <p><strong>P.S.</strong>: For illustration of what I'm looking for, check out menu option <strong>More</strong> on <a href="https://www.flipkart.com/" rel="nofollow noreferrer">https://www.flipkart.com/</a></p>