fix(icon): icons will load when content security policies are enabled

[sean-perkins]

Background

When content security policies (CSP) are enabled, the usage of <ion-icon icon={icon}> fails to load, due to the url being a data: uri.

e.g.:

With a CSP of:

default-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/*; img-src 'self'; connect-src 'self'; font-src https://fonts.gstatic.com/*'

What's new

• Icons with a data url will be parsed using the DOMParser, allowing the asset to safely load
• <ion-icon icon={icon}> will render when a CSP is enabled.

[sean-perkins]

This change was to allow the local dev server to have more than the single index.html test template. Is there another way to accomplish this or is this the recommended path?

[sean-perkins]

If Liam can create a pre-release build, that would be awesome. I'm confident in these changes as they relate to the ionicons repo, but would like to do additional verification in Framework + cut a dev-build there to have CS/customer also verify.

[sean-perkins]

Validated that this fixes the reported bug:

Framework dev-build: 6.3.5-dev.11667495782.100cdb2c
Reproduction: https://github.com/dtarnawsky/cs-back-button-csp

Back button icon loads on the dev-build without an error. We have other CSP violations in some of our styles that I've reported in the JIRA task.

[liamdebeasi]

Great job!