2015-01-08 96 views
3

我試圖使用Google Material Design的md-icon指令,所以我無法更改我使用的SVG圖標的顏色。使用md-icon設置SVG的顏色

這是我使用的代碼:

<!-- black SVG (DO NOT Color) --> 
<h2 style="color:red;">md-icon 
    <md-icon icon="bower_components/material-design-icons/action/svg/design/ic_android_24px.svg"></md-icon> 
</h2> 

我能得到的圖標有色的唯一方法是使用SVG而不是md-icon

<!-- colored --> 
<h2 style="color:red;"> COLORED 
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M22 12c2.76 0 5.26 1.12 7.07 2.93L24 20h12V8l-4.1 4.1C29.37 9.57 25.87 8 22 8 14.95 8 9.13 13.22 8.16 20h4.04c.93-4.56 4.96-8 9.8-8zm11.28 18.27c1.33-1.81 2.23-3.95 2.56-6.27H31.8c-.93 4.56-4.96 8-9.8 8-2.76 0-5.26-1.12-7.07-2.93L20 24H8v12l4.1-4.1c2.53 2.53 6.03 4.1 9.9 4.1 3.1 0 5.96-1.02 8.28-2.73L40 42.98 42.98 40l-9.7-9.73z"/></svg> 
</h2> 
/* CSS used in second in colored version (that WORKS) */ 
svg { 
    width: 32px; 
    height: 32px; 
    fill: currentColor; 
    color: currenColor; 
} 

我想找到一個簡單的解決方案,在md-icon中設置位置,顏色和尺寸。

回答

0

Here是改變md-icon顏色的一個不錯的指令。

/** 
* Markup 
* <md-icon icon-fill="red" icon="'/img/icons/test.svg'" style="width: 32px; height: 32px;"></md-icon> 
*/ 

angular.module('material.components.icon.extra', [ 
    'ngMaterial' 
]) 

.directive('iconFill', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attr) { 
     var object = angular.element(element[0].children[0]); 
     if(angular.isDefined(attr.iconFill)) { 
     object.load(function() { 
      var svg = angular.element(this.getSVGDocument().documentElement); 
      svg.attr('fill', attr.iconFill); 
     }); 
     } 
    } 
    }; 
}); 
1

你可以嘗試這樣的事情

md-icon { 
    svg { 
    path { 
     fill: red !important; 
    } 
    } 
} 

記住!重要

0

只需更換圖標的SVG文件中的「填寫」屬性值更改圖標的顏色。

<svg fill="red" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> 
    <path d="M0 0h24v24H0z" fill="none"/> 
</svg> 

在地方的「紅」,你可以使用任何顏色