I am trying to setup some custom svg icons like this
<i class="my-svg-icon"></i>
I have the svg displayed but cannot adjust the color
.my-svg-icon {
height: 25px;
width: 25px;
color: red !important;
content: url('/mysvg.svg');
}
I have set the stroke in the svg to be currentColor and the fill is none.
1
Instead of using the i tag, try using the svg tag. By using the svg tag you can add a color property like this:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g color="green">
<rect width="50" height="50" fill="currentcolor" />
<circle
r="25"
cx="70"
cy="70"
stroke="currentcolor"
fill="none"
stroke-width="5" />
</g>
</svg>Source
CSS mask and -webkit-mask properties are used to display the SVG as a mask image, allowing you to apply the color using background-color: currentColor.
NOTE: Ensure your SVG uses currentColor for the stroke or fill.
.my-svg-icon {
height: 25px;
width: 25px;
color: red !important;
display: inline-block;
background: none;
-webkit-mask: url('/mysvg.svg') no-repeat center;
mask: url('/mysvg.svg') no-repeat center;
mask-size: contain;
background-color: currentColor;
}
2