Using ng-bootstrap components is causing errors associated with my Content Security Policy

I have recently added a Content Security Policy and now I am getting the following error from using the ng-bootstrap Accordion and probably other similar components from this library:

Refused to load the image 'data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke- .... ... because it violates the following Content Security Policy directive: "img-src 'self' 'nonce-5e3808cd
​

I believe this stems from ng-bootstrap's use of inline svg images such as this taken from an ng-bootstrap css class:

bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e);


I am not sure how I can modify my Content Security Policy to correct this, without defeating the purpose for a CSP. Is this something that can only be corrected in ng-bootstrap or can I address this in my application? I would greatly appreciate help and an explanation of this issue.

Continue reading...