Change Color of an SVG Image Defined in CSS with a CSS Mask

The mask CSS property can be used to quickly change the background color of an SVG image that's defined in CSS.

For instance take an SVG image defined via a class in CSS as so:

.icon-prev {
    background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDc5Mi4wODIgNzkyLjA4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzkyLjA4MiA3OTIuMDgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGcgaWQ9Il94MzdfXzM0XyI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik0zMTcuODk2LDM5Ni4wMjRsMzA0Ljc0OS0yNzYuNDY3YzI3LjM2LTI3LjM2LDI3LjM2LTcxLjY3NywwLTk5LjAzN3MtNzEuNjc3LTI3LjM2LTk5LjAzNiwwTDE2OS4xMSwzNDIuMTYxICAgICBjLTE0Ljc4MywxNC43ODMtMjEuMzAyLDM0LjUzOC0yMC4wODQsNTMuODk3Yy0xLjIxOCwxOS4zNTksNS4zMDEsMzkuMTE0LDIwLjA4NCw1My44OTdsMzU0LjUzMSwzMjEuNjA2ICAgICBjMjcuMzYsMjcuMzYsNzEuNjc3LDI3LjM2LDk5LjAzNywwczI3LjM2LTcxLjY3NywwLTk5LjAzNkwzMTcuODk2LDM5Ni4wMjR6IiBmaWxsPSIjMWE2ZmI3Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") no-repeat;
}

An easy way to adjust the icon color is by instantiating the SVG as a mask and applying a background-color property:

.icon-prev {
    background-color: #c8c7cc;
    -webkit-mask: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDc5Mi4wODIgNzkyLjA4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzkyLjA4MiA3OTIuMDgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGcgaWQ9Il94MzdfXzM0XyI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik0zMTcuODk2LDM5Ni4wMjRsMzA0Ljc0OS0yNzYuNDY3YzI3LjM2LTI3LjM2LDI3LjM2LTcxLjY3NywwLTk5LjAzN3MtNzEuNjc3LTI3LjM2LTk5LjAzNiwwTDE2OS4xMSwzNDIuMTYxICAgICBjLTE0Ljc4MywxNC43ODMtMjEuMzAyLDM0LjUzOC0yMC4wODQsNTMuODk3Yy0xLjIxOCwxOS4zNTksNS4zMDEsMzkuMTE0LDIwLjA4NCw1My44OTdsMzU0LjUzMSwzMjEuNjA2ICAgICBjMjcuMzYsMjcuMzYsNzEuNjc3LDI3LjM2LDk5LjAzNywwczI3LjM2LTcxLjY3NywwLTk5LjAzNkwzMTcuODk2LDM5Ni4wMjR6IiBmaWxsPSIjMWE2ZmI3Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") no-repeat;
    mask: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDc5Mi4wODIgNzkyLjA4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzkyLjA4MiA3OTIuMDgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGcgaWQ9Il94MzdfXzM0XyI+CgkJPGc+CgkJCTxwYXRoIGQ9Ik0zMTcuODk2LDM5Ni4wMjRsMzA0Ljc0OS0yNzYuNDY3YzI3LjM2LTI3LjM2LDI3LjM2LTcxLjY3NywwLTk5LjAzN3MtNzEuNjc3LTI3LjM2LTk5LjAzNiwwTDE2OS4xMSwzNDIuMTYxICAgICBjLTE0Ljc4MywxNC43ODMtMjEuMzAyLDM0LjUzOC0yMC4wODQsNTMuODk3Yy0xLjIxOCwxOS4zNTksNS4zMDEsMzkuMTE0LDIwLjA4NCw1My44OTdsMzU0LjUzMSwzMjEuNjA2ICAgICBjMjcuMzYsMjcuMzYsNzEuNjc3LDI3LjM2LDk5LjAzNywwczI3LjM2LTcxLjY3NywwLTk5LjAzNkwzMTcuODk2LDM5Ni4wMjR6IiBmaWxsPSIjMWE2ZmI3Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=") no-repeat;
}

This is not perfectly supported across all browsers, but that's OK: https://caniuse.com/#search=mask.