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）”绝对可以在我的应用程序中的任何其他地方工作，但是在这里。如果我添加一个样式标签并手动设置可以工作的颜色，但我不愿诉诸于此。我尝试在图标上添加另一个类来设置颜色，但是那也不起作用。我应该注意，正确应用了字体大小，但没有正确应用颜色。

编辑：

我正在使用此site生成的棱角材质主题。

无论出于何种原因，我的蓝色都没有被拉到我的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结构，就无法回答此问题。通过在HTML树的上方指定一个唯一元素以使选择器更具体，可以不使用!important进行修复，例如：

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

有关此操作的信息，请参见：http://cssspecificity.com/。

无法设置材质图标颜色

1 个答案: