I recently had to re-visit some code for our Caddify no-code Mobile Companion App builder and had the opportunity to incorporate Ionic’s ion-accordion component. My use case required customisation of the icon used against the header of each accordion though, and I could not find an example for this. So here one is.
See the Pen
Ionic ion-accordion with Custom ion-icon by Todd Halfpenny (@toddhalfpenny)
This CodePen example shows an ion-accordion-group with three accordions in. The first uses the OOTB icon, the second shows a working custom icon (still an ionicon) with styling, and the third shows what I was initially doing and getting it wrong.
The key to success is to define an ion-icon but to also give it a class of ion-accordion-toggle-icon, without which the out-of-the-box icon is also shown.
A working ion-accordion with a custom icon would look like this;
<ion-accordion value="second"> <ion-item slot="header" color="light"> <ion-icon class="ion-accordion-toggle-icon custom-icon" name="logo-ionic" slot="end" > </ion-icon> <ion-label>Second Accordion with custom icon</ion-label> </ion-item> <div class="ion-padding" slot="content"> Second Content </div> </ion-accordion>
In this example the custom-icon class is just used to set the color of the icon.