SVG in list-style-image breaks when adding fill

You cannot add fill to a path in a svg that has been converted to base64 like you normally do with inline svgs. Either add the fill before conversion to base64, or add it like this in your current css:

fill="%23f00"

The above is equivalent to fill="#f00". This goes also for stroke, basically replace # with %23 in base64.

Stroke example: stroke="%23f00" stroke-width="1"

So your svg with fill code will be:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width="18" height="18" viewBox='0 0 1792 1792' xmlns="http://www.w3.org/2000/svg"><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z' fill="%23f00"/></svg>");
}