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

I'm trying to implement a menu using the new

<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.

CodePudding user response：

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;
        }
    }
}