Add option to render icons (or other assets/components) synchronously

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

When displaying an icon in a <calcite-icon>, the actual icon is loaded asynchronously. This is fine if the page or component containing the icon is loading for the first time. However, in applications which show/hide elements dynamically, this poses some problems:

The first time an icon is displayed, users have to wait some time for the icon to appear.
Even if an icon was previously loaded into the page, creating a new instance referring to the same icon can still cause flickering, because the <calcite-icon> component is rendered and the icon itself only gets loaded and rendered asynchronously.

Here is a CodeSandbox which exemplifies the issue: Sandbox

Acceptance Criteria

We would like to have an option to preload certain icons. Once the icons are preloaded, Calcite components should render them synchronously to the DOM.
After an icon is loaded (whether it was preloaded or not), subsequent renders should be synchronous.

Relevant Info

No response

Which Component

<calcite-icon> and any other component using icons.

Example Use Case

Within our applications we often have panels, popups, tooltips (etc) containing icons and which are rendered dynamically. Having icons flicker or pop into the app after these components are rendered provides a subpar user experience.

Priority impact

p4 - not time sensitive

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

Esri / calcite-design-system