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/>}

Answer 1

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 />
        }
      >

Answer 2

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