How to add more action icons to material UI accordion?

Question

I want to achieve something like in the above picture. Apart from down arrow (collapse) , I want to add an edit and a delete icon as well. How can I achieve this? Here is some code for material UI accordion.

export default function SimpleAccordion() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
          sx={{display: 'flex', justifyContent: 'space-between'}}
        >
          <Typography>Accordion 1</Typography>

        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}
 

Answer 1

Put them in Boxes and style them as follows:

     <Accordion>
        <Box sx={{ display: "flex" }}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel2a-header"
            sx={{ flexGrow: 1 }}
          >
            <Typography>Accordion 1</Typography>
          </AccordionSummary>
          <Box>
            <IconButton>
              <EditIcon onClick={() => alert("Edit Me!")} />
            </IconButton>

            <IconButton>
              <DeleteIcon onClick={() => alert("Delete Me!") />
            </IconButton>
          </Box>
        </Box>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>

That's it!

You can add more futures to your expandIcon by using fragments:

 expandIcon = {
    <>
      <IconButton>
        <ExpandMoreIcon />
      </IconButton>
    </>
  }

If you want the accordion to expand by clicking either edit or delete button, you need to add your own state with handler.

Here as an example I've added the expand feature to edit button. First add the state and handle:

const [expand, setExpand] = React.useState(false);
  const toggleAccordion = () => {
    setExpand((prev) => !prev);
  };

And in Accordion:

    <Accordion expanded={expand}>
        <Box sx={{ display: "flex" }}>
          <AccordionSummary
            iconbuttonprops={{ onClick: toggleAcordion }}
            onClick={() => toggleAccordion()}
            expandIcon={
              <>
                <IconButton>
                  <ExpandMoreIcon />
                </IconButton>
              </>
            }
            aria-controls="panel1a-content"
            id="panel2a-header"
            sx={{
              flexGrow: 1,
            }}
          >
            <Typography>Accordion 1</Typography>
          </AccordionSummary>
          <Box>
            <IconButton
                IconButtonProps={{ onClick: toggleAccordion }}
                onClick={() => toggleAccordion()}
            >
              <EditIcon/>
            </IconButton>

            <IconButton>
              <DeleteIcon />
            </IconButton>
          </Box>
        </Box>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>