mat-icon css стиль цвета не применяется

Question

Как свежее в Angular. У меня есть сомнения. В Angular 4 у нас есть тег md-icon из MdIconModule, который был изменен на MatIconModule в более поздней angular версии.

рассмотрим код в Angular 4

app.component. html

<md-icon>add_alert</md-icon>

app.componentn. css

md-icon.add-alert{ color : purple }

В приведенном выше коде значок был изменен с фиолетового на черный.

Но в Angular 9,

app.component. html

<mat-icon>add_alert</mat-icon>

app.componentn. css

mat-icon.add-alert{ color : purple }

Приведенный выше код не изменил цвет. А также нам нужно вручную добавить класс в тег для изменения цвета.

кто-нибудь может объяснить причину

Answer 1

Вы можете применить стиль к значку циновки следующим образом:

::ng-deep{
   mat-icon {
        font-size: 24px;
        color: #3b86ff;
      }
 }

ИЛИ

.white-icon {
   color: white;
 }

 /* Note: If you're using an SVG icon, you should make the class target the `<svg>` element */
.white-icon svg {
  fill: white;
}


<mat-icon class="white-icon">menu</mat-icon>