Material-ui: [Accordion] Summary custom collapse icon

[damir-sirola]

ExpansionPanelSummary component currently allows passing in custom expand icon. The collapsed state just rotates that icon 180 degrees. It would be nice to be able to pass in collapseIcon as a prop or (to support animation) pass a render prop for icon that receives expanded prop

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Pass a collapseIcon prop for icon that is rendered when the panel is expanded or add a renderIcon prop that takes in expanded status and renders the icon

Motivation 🔦

I'm trying to accomplish having custom icons for both expanded and collapsed state of ExpansionPanelSummary.

[oliviertassinari]

@damir-sirola Do you expect an animation? What prevents you to implement this feature, today (by controlling the component and overriding the CSS to remove the animation)?

[damir-sirola]

The animation is not that big of a problem. A bigger problem is being unable to pass in the icon to render when the panel is expanded.
The only workaround that comes to mind is to pass different icon when the panel is expanded, but that doesn't work for uncontrolled panels

[oliviertassinari]

that doesn't work for uncontrolled panels

Ok, thank you for the confirmation.

Actually you have a second viable path that works with the uncontrolled panel: You can use the .Mui-expanded pseudo-class to change the displayed value in the expandIcon prop.

import styled from "styled-components";

const Icon = styled(props => (
  <div {...props}>
    <div className="n">n</div>
    <div className="y">y</div>
  </div>
))`
  & > .y {
    display: block;
  }
  & > .n {
    display: none;
  }
  .Mui-expanded & > .n {
    display: block;
  }
  .Mui-expanded & > .y {
    display: none;
  }
`;

https://codesandbox.io/s/material-demo-9vn0x

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[mkhoussid]

For anyone coming here, looking to remove the rotate animation from the expand icon, (like in this example, for instance), according to the docs, you can override the expandIcon rule like this:

const AccordionSummary = withStyles({
    // ... other styles
    expandIcon: {
        transform: 'none !important',
    },
})(MuiAccordionSummary);

Took me some time to figure it out, before I realized !important was an imperative piece to this.