Как установить иконку в качестве фона элементу?

Пытаюсь сделать фон для 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;
              }

            }

но поему-то иконка не отображается, в чем может быть причина?