How to change the icon/toggle color of a mat-expansion-panel?-CodePudding

I have already tried to use:

.mat-expansion-panel-header{
color: #fff;
}
.mat-expansion-panel-header::after{
color: #fff;
}
.mat-expansion-panel{
color: #fff;
}
.mat-expansion-panel::after{
color: #fff;
}

.mat-focus-indicator{
color: #fff;
}

.mat-expansion-indicator{
 color: #fff;
 }

.mat-expansion-indicator::after{
 color: #fff;
 }

Example I've also tried placing a custom class, also placing the style directly on the element and I can't get it to take the color I want to use. Help me :(

CodePudding user response：

Try this:

.mat-expansion-panel .mat-icon {
fill:#fff;
}

Why? The icon is a SVG, so to change its color, you need to use the "fill" CSS property.

CodePudding user response：

It didn't work for me using "fill". I kept digging and it seems that Angular Material forces you to use which I removed because I don't really have a use for it.

But to access the "indicator" property, this framework must be strictly followed:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      This is the expansion title
    </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is the primary content of the panel.</p>
</mat-expansion-panel>

Just add the empty tag that I was missing and in my Ionic project, to the "global.scss" file I added the following lines:

.mat-expansion-panel-header-description,
.mat-expansion-indicator::after {
       color: #fff;
}