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

user_10977224 0
Viewed 1867

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.

enter image description here

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

ionic-framework
2 Answers
user_108054790

If you don't use scss, you can use this in your style.css:

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

It works too.

user_185326330
Related