title: Material-UI: Expand Accordion by clicking the icon only
body: <p>I have created an Accordion for my Project. But I want the panel to be expanded only when the expand icon is clicked. Currently it is expanding on clicking anywhere on the panel. Can we customize its expanding behavior ?</p>
  <p>CODE:</p>
  <pre><code>import React from &quot;react&quot;;
  import ExpandMoreIcon from &quot;@material-ui/icons/ExpandMore&quot;;
  import Accordion from &quot;@material-ui/core/Accordion&quot;;
  import AccordionDetails from &quot;@material-ui/core/AccordionDetails&quot;;
  import Typography from &quot;@material-ui/core/Typography&quot;;
  import AccordionSummary from &quot;@material-ui/core/AccordionSummary&quot;;
  
  export default function App() {
  return (
      &lt;div style={{}}&gt;
      &lt;h4&gt;How to create Accordion in ReactJS?&lt;/h4&gt;
      &lt;Accordion style={{ width: 400}}&gt;
          &lt;AccordionSummary 
           expandIcon={&lt;ExpandMoreIcon /&gt;}
           aria-controls=&quot;panel1a-content&quot;
          &gt;   
            &lt;div&gt;Click to Expand&lt;/div&gt;
          &lt;/AccordionSummary&gt;
          &lt;AccordionDetails&gt;
          &lt;Typography&gt;Greetings of the day :)&lt;/Typography&gt;
          &lt;/AccordionDetails&gt;
      &lt;/Accordion&gt;
      &lt;/div&gt;
  );
  }
  </code></pre>