CSS background inline SVG image not rendered when launching website locally

Question

In this project I am trying to replace Font Awesome with inline SVG icons.
The following CSS describes a menu toggle button as shown in this screenshot:

#btnToggleHeader {
    float: right;
    position: relative;
    top: -0.1em;
    outline: none;
    margin: 0 0 0 0.5em;
    cursor: pointer;

    /* The styling matches that of the select2 dropdown box */
    background: none;
    border: 2px solid #aaa;
    border-radius: 4px;
    padding: 0.2em 0.5em;
}

#btnToggleHeader:hover {
    background-color: #f4f4f4;
}

#btnToggleHeader::before {
    display: inline-block;
    content: '';
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 15 15'%3E%3Cg fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 3a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1h-12zM1 7.5a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5z' fill='%23626262'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 1px;
}

The button is shown correctly when I let Netlify deploy a snapshot of the website via rollup.js.

When I launch the website locally by running

$ npm run build
$ python3 -m http.server

then the menu toggle button does not show up correctly as depicted in the following screenshot:

Why does the icon behave different?