feat: accordion, improve customizability of toggle icons based on state and add label text

[EinfachHans]

Feature Request

Ionic version:

[ ] 4.x [ ] 5.x [X] 6.x

Describe the Feature Request

Currently in our App we create a own Accordion Component, which i want to replace by the Ionic one in the Future. But we have two Icons, one for expanded and one for collapsed state, which does not rotate.

I wan't to be able to create it like this too. I can create a PR, but we should discuss the best was to implement this.

Describe Solutions

I understand that we can create a own Icon with Class ion-accordion-toggle-icon and then no extra Icon will be created. But because of this Class the icon will rotate between the states. So one Option would be to add a toggleIconRotate: boolean Prop. I don't like this option as the user has to check by himself if the accordion is collapsed or not and set the specific icon on his own.

The better option was if the accordion component would be able to do this itself. So maybe by setting the Type of toggleIcon to string | {collapsed: string; expanded: string;} and use two different icons based on the state. If this option is used the icon would not rotate.

Additional Context

What do you think? Do you prefer a Option? Should i create a PR?

[liamdebeasi]

Thanks for the issue -- I think this feature would be useful. I am not sure what the best API for this would be, but I can discuss with the team.

[jonathanheilmann]

Any updates here? We would like to rotate the icon at about 90 degree, but I can't find any option to modify the default behavior.

[kazlauskis]

We have a slightly different requirement which is to be able to dynamically change the toggleIcon. Currently, it seems the icon is set at the load time. It could listen for changes and do something like this when the toggleIcon prop changes:

 const iconEl = ionItem.querySelector('.ion-accordion-toggle-icon');
 iconEl.icon = this.toggleIcon;

@jonathanheilmann you can use css for this modifying the angle. Something like this will set it for the expanded state:

  .accordion-expanded > [slot='header'] .ion-accordion-toggle-icon {
    transform: rotate(90deg);
  }

[averyjohnston]

Another thing to consider is the feature described here: https://github.com/ionic-team/ionic-framework/issues/26488 It would be valuable to allow for custom label text alongside the icon, which doesn't rotate when the accordion is opened. This would make sense to work on alongside the improvements described over here.