修改 Ionic 6 中 ion-accordion 的图标大小和颜色

Question

我正在尝试使用 Ionic 6 中的新ion-accordion来实现一个菜单。

文档说，当我们在槽中ion-icon使用时，会自动添加an 。他们提供了一个组件属性来更改图标名称，甚至使用自定义图标（不是 ），但文档没有提到如何更改默认图标的大小和颜色。ion-itemheaderion-icon

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

我努力了：

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

  }

}

我想更改ion-accordion提供的默认图标的大小和颜色。

任何帮助或建议将不胜感激。

Answer 1

检查此工作网址：https://stackblitz.com/edit/ionic6-angular13-jvsxxr ?file=src/styles.css

styles.scss在Orglobal.scss文件中应用以下代码

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