I’m trying to add a custom bullet using CSS list-style-image. Here is the attribute:

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'/></svg>");
}

For convenience, this is the SVG file that is embedded in the list-style-image:

<?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'/>
</svg>

The problem is, when I try to add a fill attribute to <path>, the whole thing seems to break, as the SVG stop showing up as a bullet (the default ul circle bullet shows). I’ve tried using both fill='#f00', style='#f00' and stroke='#f00'. All of them breaks the SVG.

Any idea what might be the problem?