How to set an icon as the background of an element?

Question

Sass

I'm trying to make a background for a div

div {
              position: relative;

              &:before {
                content: "";
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#0172DB' fill-rule='nonzero' d='M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 1.333A6.656 6.656 0 0 1 14.667 8 6.656 6.656 0 0 1 8 14.667 6.656 6.656 0 0 1 1.333 8 6.656 6.656 0 0 1 8 1.333zm2.792 2.709a.363.363 0 0 0-.25.166L7.27 9.062l-1.542-1.52c-.133-.2-.388-.216-.52-.084l-.605.604c-.133.201-.133.472 0 .605L6.937 11c.133.068.32.208.521.208.133 0 .347-.07.48-.27l4-5.876c.132-.2.057-.388-.209-.52l-.666-.48a.483.483 0 0 0-.271-.02z'/></svg>")  no-repeat;
               
               height: 40px;
                width: 60px;
              }

            }

but for some reason the icon is not displayed, what could be the reason?

Answer 1

SVG can be used in CSS using data:URI, but without encoding this only works in browsers running on the Webkit engine. If you encode SVG using encodeURIComponent, it will work everywhere.
Encoded SVG can be used in properties backgroundand border-image
Here is Yulia Bukhvalova's service that helps with encoding: URL - encoder for SVG PS Encoded
SVG code can be decoded back to normal if needed codepen.io/hisbvdis/pen/wvBwRYP