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

我已经进口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

来源

2017-09-03 infodev

是linkedin.svg你自己添加到您的项目中的文件？你能修改它吗？发布（或链接）其源代码可能会有帮助 – ccprog

我从iconflat获取它。我已更新帖子 – infodev

您必须更改linkedin.svg文件本身。寻找您的：style="fill:#0077B7;"并使其颜色交换currentColor。然后，在你的样式表中设置color将起作用。

（值得注意的是，与图标关联的licence并允许其修改。蝙蝠，因为它是一个商标，检查LinkedIns政策对不同的颜色显示他们的标志！）

来源

2017-09-03 14:59:12 ccprog

我已经改变了svg文件，并工作。谢谢 – infodev

链接有几个原因，为什么你写的CSS不影响图标。

有可能是一个更具体的CSS规则影响图标。要进行调试，您需要使用Google Chrome devtools之类的东西，并检查元素并检查计算出的选项卡。确保你检查显示全部然后键入你想要从哪里继承它的值来查看的属性（如color or fill`）。当你点击箭头时，它将显示应用的值以及对正在使用的CSS文件的引用。

在角2，当你调用SVG这种方式可能会被注入它作为一个img标签和这样您将无法使用fill或color更改其颜色。

如果SVG文件本身具有应用到它的元素（如path ...等）与特定的风格（如fill属性）类，您将无法使用CSS fill覆盖它。您需要先删除这些类。

来源

2017-09-03 14:31:55

添加此属性md-icon工作对我来说：style="color:red;font:bold;"。

例：

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

来源

2017-09-04 06:54:44 HBK

OP要求** SVG图标**，而不是** Google的材料图标**。 – Edric

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

回答

相关问题