How to change icon when accordion summary is expanded?

Question

I want to change the icon based on whether the accordion is expanded or not.

I see that on the material ui page that the CSS have .Mui-expanded which can see whether expanded={true} or false, but how can I use this to set a different icon when expanded is true or false.

So I want to set IconA if expand is true and IconB if expand is false.

expandIcon={<IconA/>}

Murli Prajapati · Accepted Answer · 2020-09-01T16:12:43.010

12

You can use expandIcon prop available for AccordionSummary component. Set condition like this: expandIcon={expanded === 'panel1'?<ExpandMoreIcon />:<Minimize/>}

<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
    <AccordionSummary
      expandIcon={expanded === 'panel1'?<ExpandMoreIcon />:<Minimize/>}
      aria-controls="panel1bh-content"
      id="panel1bh-header"
    >
      <Typography className={classes.heading}>General settings</Typography>
      <Typography className={classes.secondaryHeading}>I am an accordion</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
        maximus est, id dignissim quam.
      </Typography>
    </AccordionDetails>
  </Accordion>

This sample code is taken from docs:https://material-ui.com/components/accordion/#controlled-accordion

edited Sep 01 '20 at 16:12

answered Sep 01 '20 at 15:59

Murli Prajapati

8,833
5
38
55

is expanded a component from accordion or a value I create? – Tuan Le Sep 01 '20 at 16:08
`expanded` is state variable created using `useState`. Refer:https://material-ui.com/components/accordion/#controlled-accordion – Murli Prajapati Sep 01 '20 at 16:12
instead of using string, can I just simply use boolean true or false? – Tuan Le Sep 01 '20 at 16:17
1

Also, how can I move the icon to the left in front of the text? – Tuan Le Sep 01 '20 at 16:23
No. boolean will not work because you won't have any way to determine which accordion to open. And to move icon to front, remove expandIcon prop and write your own markup to show icons – Murli Prajapati Sep 01 '20 at 16:26

score 5 · Answer 2 · answered Feb 08 '22 at 11:21

The solution mentioned above https://stackoverflow.com/a/63691313/11603006 is absolutely right but has the disadvantage that you must use a useState hook to show a different icon when the accordion is collapsed/expanded. This makes it however difficult (impossible?) to specify a custom expandIcon globally in the Theme. Therefore Mui should in my opinion pass the expand state to the expandIcon prop. There is a feature request for this https://github.com/mui/material-ui/issues/18326 but it has not been implemented yet. As a workaround and an alternative to the above solution, which has the benefit that it can be used in the theme globaly, it is possible to provide a custom icon in that way:

  const CustomExpandIcon = () => {
    return (
      <Box
        sx={{
          '.Mui-expanded & > .collapsIconWrapper': {
            display: 'none',
          },
          '.expandIconWrapper': {
            display: 'none',
          },
          '.Mui-expanded & > .expandIconWrapper': {
            display: 'block',
          },
        }}
      >
        <div className="expandIconWrapper">
          <MinusIcon />
        </div>
        <div className="collapsIconWrapper">
          <PlusIcon />
        </div>
      </Box>
    )
  }

See: https://codesandbox.io/s/basicaccordion-material-demo-forked-2916o

Wonderful solution that doesn’t require change to controlled input — Sebastian Voráč MSc., Sep 18 '22 at 23:22

Sehrish Waheed · Answer 3 · 2021-11-25T11:14:42.850

2

you can use conditional rendering

     <Accordion
      key={index + 1}
      className={style.accordianMargin}
      expanded={expanded === index + 1}
      onChange={handleChange(index + 1)}
    >
      <AccordionSummary
        expandIcon={
          expanded && opened === index + 1 ? <RemoveIcon /> : 
                                                <AddIcon />
        }
      >

edited Nov 25 '21 at 11:14

answered Nov 24 '21 at 09:03

Sehrish Waheed

1,230
14
17

How to change icon when accordion summary is expanded?

3 Answers3

Linked