Hamburger icon mission on responsive menu

Problem/Motivation

For some reason I don't see the hamburger menu by default.

http://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css

_navbar.scss overrides icon.scss hiding the icon
_navbar.scss

.navbar-toggler-icon {
    background: no-repeat center center;
}

icons.scss

navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

Steps to reproduce

Install and seemed to not work on a clean version. Both Firfox and Chrome.

Proposed resolution

Changing loading order, but not sure what other knock-on effects.

Remaining tasks

User interface changes

API changes

Data model changes