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

Question

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

文档说当我们在 header 槽中使用 ion-item 时，会自动添加一个 ion-icon。他们提供了一个组件属性来更改图标名称甚至使用自定义图标（不是 ion-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

检查这个工作 URL : https://stackblitz.com/edit/ionic6-angular13-jvsxxr?file=src/styles.css

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

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

Answer 2

如果你不使用 scss，你可以在你的 style.css:

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

它也有效。

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

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

ionic-framework