Can't Set Material Icon Color

Question

I have this html:

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

And this css:

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

However, I'm unable to change the color of the icon? "mat-color($vp-blue)" works absolutely everywhere else in my app but here. If I add a style tag and set the color manually that works but I'd hate to resort to that. I tried adding another class to the icon to set the color but that didn't work either. I should note that the font-size is applied properly but not the color.

Edit:

I'm using a angular material theme generated by this site.

For whatever reason my blue color isn't being pulled in to my SCSS file. However, another color pulled from the same file is working... I added a reference to the color I actually want and it works as expected. I'm including my theme.scss file for reference.

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

Apologies the color that is working is the $vp-app-warn. My question is why this would be happening in this particular situation. $vp-blue-simple works just fine yet using mat-color($vp-blue) does not. I could not find an angular-material-theme tag or anything similar.

Answer 1

This question cannot be answered without seeing your overall HTML structure. It's possible to fix, without resorting to !important by specifying a unique element higher up the HTML tree to make the selector more specific, such as:

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

See: http://cssspecificity.com/ on how to do this.