Ionic ion-accordion with Custom ion-icon

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)
on CodePen.0

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.

Leave a Reply

Your email address will not be published. Required fields are marked *