Изменить цвет пользовательского значка в угловом материале

Question

Я регистрирую пользовательский значок с:

addCustomMaterialIcon(name: string, url: string) {
      this.matIconRegistry.addSvgIcon(
        name,
        this.domSanitizer.bypassSecurityTrustResourceUrl(`${url}`)
      );
}

и использую его с

<mat-icon svgIcon="vl-icon" class="y-icon" color="primary"></mat-icon>

Но значок белый и не виден.Как я могу изменить его цвет?
Попробовал css не повезло:

.y-icon svg {
  fill: yellowgreen!important;
}

Заранее спасибо

Answer 1

вы можете использовать :: ng-deep , но теперь он устарел вместо того, чтобы смотреть на : host-context

::ng-deep .y-icon {
  fill: yellowgreen !important;
}

для получения дополнительной информации.детали - https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Answer 2

Вы можете сделать следующее, чтобы изменить цвет mat-icon svgIcon

HTML

• установить префикс mat- в вашем CSS, ноигнорируйте его при назначении атрибуту color.

  <mat-icon svgIcon="thumbs-up" color="y-icon"></mat-icon>
  

CSS

.mat-y-icon  {
  color: yellowgreen;
}

Stackblitz

https://stackblitz.com/edit/angular-taqtkq?embed=1&file=app/icon-svg-example.css

Answer 3

@ Вугар Абдуллаев, вы пробовали с ::ng-deep

попробуйте

::ng-deep .y-icon svg {
    fill: yellowgreen !important;
}

edit:

 ::ng-deep .y-icon {
    fill: yellowgreen !important;
  }