Не могу установить цвет иконки материала

Question

У меня есть этот HTML:

<i class="material-icons">
   cloud_upload
</i>

А это css:

.material-icons {
   font-size: 100px;
   color: mat-color($vp-blue) !important;
}

Однако я не могу изменить цвет значка? "mat-color ($ vp-blue)" работает абсолютно везде в моем приложении, но здесь. Если я добавлю тег стиля и установлю цвет вручную, это работает, но я бы не хотел прибегать к этому. Я попытался добавить другой класс к значку, чтобы установить цвет, но это тоже не сработало. Следует отметить, что размер шрифта применяется правильно, но не цвет.

Edit:

Я использую тему угловых материалов, созданную этим сайтом .

По какой-то причине мой синий цвет не отображается в моем файле SCSS. Тем не менее, другой цвет, извлеченный из того же файла, работает ... Я добавил ссылку на цвет, который я на самом деле хочу, и он работает, как ожидалось. Я включил мой файл theme.scss для справки.

@import '~@angular/material/theming';
@include mat-core();

// #EB3D53
// #4980b3
//background-color: #FBFBFB;

// this works
$vp-blue-simple: #4980b3;

$vp-blue: (
  50: #e9f0f6,
  100: #c8d9e8,
  200: #a4c0d9,
  300: #80a6ca,
  400: #6493be,
  500: #4980b3,
  600: #4278ac,
  700: #396da3,
  800: #31639a,
  900: #21508b,
  A100: #c8dfff,
  A200: #95c1ff,
  A400: #62a4ff,
  A700: #4895ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

/* For use in src/lib/core/theming/_palette.scss */
$vp-red: (
    50 : #fde8ea,
    100 : #f9c5cb,
    200 : #f59ea9,
    300 : #f17787,
    400 : #ee5a6d,
    500 : #eb3d53,
    600 : #e9374c,
    700 : #e52f42,
    800 : #e22739,
    900 : #dd1a29,
    A100 : #ffffff,
    A200 : #ffdddf,
    A400 : #ffaaaf,
    A700 : #ff9098,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$vp-app-primary: mat-palette($vp-blue);
$vp-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$vp-app-warn:    mat-palette($vp-red);

$vp-app-theme: mat-light-theme($vp-app-primary, $vp-app-accent, $vp-app-warn);
@include angular-material-theme($vp-app-theme);

Edit2:

Извините, цвет, который работает - это $ vp-app-warn. У меня вопрос, почему это происходит в этой конкретной ситуации. $ vp-blue-simple работает просто отлично, но использование mat-color ($ vp-blue) - нет. Я не смог найти тег угловой материал-материал или что-то подобное.

Answer 1

На этот вопрос невозможно ответить, не увидев общую структуру HTML.Это можно исправить, не прибегая к !important, указав уникальный элемент выше в дереве HTML, чтобы сделать селектор более конкретным , например:

.material-icons, #mysection .material-icons {
   font-size: 100px;
   color: mat-color($vp-blue)
}

См .: http://cssspecificity.com/ о том, как это сделать.