Cannot change color of svg icon with css-class `fill: color !important'

Asked Aug 22 '19 at 06:18

Active Aug 22 '19 at 06:26

Viewed 67 times

I can't change the color of svg icon trough css class.

I have class check-icon which need to change color of svg:

.check-icon {
  fill: $green !important;
}

This is HTML/jsx of svg check icon:

<img className="check-icon" src="/static/icons/check.svg" alt="check" />

This is svg icon:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="13px" height="10px" viewBox="0 0 13 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- Generator: Sketch 52.1 (67048) - http://www.bohemiancoding.com/sketch -->
    <g id="Symbols" stroke="none" stroke-width="1" fill="currentcolor" >
        <g id="Icons/Checkmark" fill="#044ca0">
            <g id="Overrides/Cell/Accessory/Checkmark">
                <polygon id="Checkmark" points="1.5 4.5 0 6 4 10 13 1.5 11.5 0 4 7"></polygon>
            </g>
        </g>
    </g>
</svg>

Why color is not changed?

asked Aug 22 '19 at 06:18

Mark James

2

if you want change icon color or '' tag background color – Aravinth E Aug 22 '19 at 06:22
2

because the image is a separate document to the main document and css does not apply cross-document. – Robert Longson Aug 22 '19 at 06:22
2

https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color – Edward Aug 22 '19 at 06:23
2

use the `svg` tag instead of `img` tag. when you put a `svg` in a `img` element the `svg` becomes a flat image which you can't change. – Shuvo Aug 22 '19 at 06:25

Cannot change color of svg icon with css-class `fill: color !important'

0 Answers0