feat: Style ion-accordion detail arrow

[FranciskoNeves]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Style Ion-accordion Icon.

Describe the Use Case

I can't access the detail arrow present by default in ion-accordion, and I want to change the size and color.

Describe Preferred Solution

Style the detail arrow through some property like "toggleIconColor" or access the detail arrow through the ShadowDOM.

Describe Alternatives

No response

Related Code

No response

Additional Information

I found this issue, but none of the solutions presented worked: https://stackoverflow.com/questions/71229819/modify-icon-size-and-color-of-ion-accordion-in-ionic-6

[liamdebeasi]

Thanks for the report. The toggle icon is in the Light DOM, not the Shadow DOM, so you are able to access the icon using CSS. If you are using Angular, make sure Angular's style encapsulation is not working against you here. Ionic adds the icon for you to the Item, so it will not receive the same style encapsulation attributes that Angular sets on elements when Angular is in charge of adding them to the DOM.

This example will not work because of Angular's style encapsulation: https://stackblitz.com/edit/angular-5mp1mj?file=src%2Fapp%2Fexample.component.css

This example will work because the styles are set globally: https://stackblitz.com/edit/angular-5mp1mj-eh8q7t?file=src%2Fapp%2Fexample.component.css,src%2Fglobal.css

I am going to close this since the desired functionality is already in Ionic, but let me know if you have any questions.

---

Here are screenshots of why the broken example does not work.

Since Ionic handles adding ion-icon to the Item, this icon does not receive any style encapsulation attributes. Notice how the Item has an _ngcontent-ng-... attribute, but the Icon does not.

However, since your styles are added to the stylesheet associated with the encapsulated component, Angular transforms your styles to expect this ngcontent attribute:

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.