SVG background color not working on Firefox

user_5166359 0
Viewed 1532

I've encountered some problems regarding the use of an svg. I have the following html and css codes

<i id="iconApp" class="icon_approved icon_lg pull-right"></i>

.icon_approved {
    background-color: #fab700;
    display: block;
    mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(../Tick-Solid.svg) no-repeat 50% 50%;
    background: url(../Tick-Solid.svg) no-repeat 50% 50%;
}

The mask does not work on firefox, that's why I added the background property instead and it works the way I wanted it to be. However, the color does not work as expected. Instead of having a color of #fab700, it is instead being interpreted as a background color.

enter image description here

The orange should be the color of the Icon, not a background color.

Additional info:

I can't find a search term to look for this kind of problem but I did find something similar to my problem.

Link : http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Upon looking at the first example, it renders properly on chrome. But if you opened the link on firefox, it appears as boxes (which I assume is background color of the element).

svg css html
2 Answers
Related