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

的链接

Answer 1

您编写的CSS不会影响图标的原因有多种。

可能存在影响图标的更具体的CSS规则。要对此进行调试，您需要使用Google Chrome开发工具等内容并检查元素并检查计算选项卡。确保选中显示全部，然后在其继承其值的位置键入要查看的属性（如color or fill`）。单击箭头时，它将显示应用的值以及对正在使用的CSS文件的引用。

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

Answer 2

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

（值得注意的是，与该图标相关联的licence确实允许其修改.Bat因为它是商标，请检查LinkedIns关于以不同颜色显示其徽标的政策！）

Answer 3

将此属性添加到md-icon为我工作：style="color:red;font:bold;"。

例如：

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

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

3 个答案: