Changing svg color using css filter

If you display svg icons using CSS background rule, one problem is that you can not change the fill color of the icon in CSS. This is now possible using CSS filter property. Simply use following tool to generate a filter rule for your desired color:

https://isotropic.co/tool/hex-color-to-css-filter/

Here is an example of displaying a black svg icon in red:

li::before {
    display: inline-block;
    content: "";
    background-image: url(../icons/caret-right-fill.svg);
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    width: 1em;
    height: 1em;
    filter: invert(16%) sepia(100%) saturate(6866%) hue-rotate(6deg) brightness(110%) contrast(123%);
}