如何为导入 svg 图标的 md-icon 着色？

Question

我会更改图标的颜色。

我已经导入了 MdIconRegistry 和 DomSanitizer

import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';

然后将 SVG 添加到注册表

constructor ( mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {

     mdIconRegistry
       .addSvgIconInNamespace('img','linkedin',
           sanitizer.bypassSecurityTrustResourceUrl('../../assets/icons/linkedin.svg'));
  }

在.html文件中调用图标

<md-icon svgIcon="img:linkedin" class="contacticon"  color="primary"></md-icon>

并修改了CSS中的颜色等参数：

.contacticon{
    padding: 10%;
    fill:currentColor;
    color: red;
    width: 200px;
    height: 200px;
    font-size:200px;
}

color:primary 和 fill: currentColor; color: red 都不工作。

如何更改颜色？

更新：这是svg

的link

Answer 1

您写的 CSS 不影响图标有几个原因。

可能有更具体的 CSS 规则影响图标。要调试它，您需要使用 Google Chrome devtools 之类的东西并检查元素并检查计算的选项卡。确保选中 show all，然后键入要查看的属性，它从哪里继承了它的值（如 color orfill`）。当您单击箭头时，它将显示应用的值以及对您正在使用的 CSS 文件的引用。

在 Angular 2 中，当您以这种方式调用 SVG 时，它可能会将其作为 img 标记注入，这样您将无法更改其颜色使用 fill 或 color.
如果 SVG 文件本身已将类应用到具有特定样式（如 fill 属性) 您将无法使用 CSS fill 覆盖它。您需要先删除这些类。

Answer 2

您必须更改 linkedin.svg 文件本身。搜索此：style="fill:#0077B7;" 并将颜色替换为 currentColor。然后，在样式表中设置 color 即可。

（值得注意的是，与图标关联的 licence 允许对其进行修改。因为它是商标，请查看 LinkedIn 关于以不同颜色显示其徽标的政策！）

Answer 3

将此属性添加到 md-icon 对我有用：style="color:red;font:bold;"。

例如：

<md-icon style="color:red;font:bold;" >clear</md-icon>

如何为导入 svg 图标的 md-icon 着色？

How to colorize md-icon importing an svg icon?

html

css

svg

angular-material2