mobile navbar toggler's icon is blocked by CSP

[kenany]

The navbar toggler that appears in mobile viewports has a "hamburger menu" icon that is unfortunately blocked by the site's CSP. The icon is defined inline:

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

Error from browser devtools:

Content Security Policy: The page’s settings blocked the loading of a resource at data:image/svg+xml,%3csvg viewBox='0 0 3… (“img-src”).

The fix could be to either adjust the CSP (within reason) to allow this inline image, or replace the image with the respective Font Awesome icon instead.

Expected

Actual

[xDashh]

Adjusting the CSP seems like no big deal, but the "proper" solution is the other one, from what I can tell. Since this is a minor UI issue, I'd opt for the non-CSP solution.