1

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 :(

Rosanny Batista
  • 21
  • 4
  • where's your other code attached to those classes? did you try to put !important on it?? maybe try that first see if that will work and add more of your code so we can all see which one you are trying to change. – Crystal May 24 '22 at 16:17
  • i think [this answer](https://stackoverflow.com/a/56619369/13518805) is what are you searching for – Dario May 24 '22 at 16:40
  • 1
    In the end it worked for me using .mat-expansion-indicator::after { color: #fff; } in the "global.scss" – Rosanny Batista May 25 '22 at 12:15

2 Answers2

0

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.

Maxime Desrosiers
  • 60
  • 5
0

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;
}
Rosanny Batista
  • 21
  • 4
  • Then I removed the again and also removed it from the styles, leaving only the "global.scss: .mat-expansion-indicator::after { colour: #a3a1b6; } and remained functional. But I still don't understand why it didn't work before ':D – Rosanny Batista May 25 '22 at 12:09