如何着色導入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？

回答

相關問題