Modify icon size and color of ion-accordion in Ionic 6

Issue

I'm trying to implement a menu using the new ion-accordion in Ionic 6.

The documentation says that an ion-icon is automatically added when we use ion-item in the header slot. They have provided a component property to change the icon name or even to use a custom icon (not an ion-icon), but the documentation doesn't mention how to change the default icon's size and color.

<ion-accordion-group>
 <ion-accordion>
     <ion-item slot="header">
         <ion-label>
             Home
         </ion-label>
     </ion-item>
 </ion-accordion>
</ion-accordion-group>

I have tried:

ion-accordion-group {

  ion-accordion {

    ion-item {

      // Attempt 1
      ion-icon {
        // Note. The default icon has this class
        &.ion-accordion-toggle-icon {
          font-size: 128px !important;
          color: red;
        }
      }

      // Attempt 2
      ion-icon[slot="end"] {
        font-size: 128px;
        color: red;
      }

    }

    // Attempt 3
    ion-item[slot="header"] {
        ion-icon[slot="end"] {
          font-size: 128px;
          color: red;
        }
    }

  }

}

I would like to change the size and color of the default icon that ion-accordion provides.

Any help or advice would be appreciated.

Solution

Check this working URL : https://stackblitz.com/edit/ionic6-angular13-jvsxxr?file=src/styles.css

apply below code in styles.scss Or global.scss file

ion-accordion-group{
    ion-accordion {
        .ion-accordion-toggle-icon {
            font-size: 50px;
            color: red;
        }
    }
}

Answered By - Ravi Ashara