feat: Style ion-accordion detail arrow about ionic-framework

[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: