JSPM

import { LitElement, html } from 'lit-element';
import '@spectrum-web-components/icon';
import { AsteriskIcon } from '@spectrum-web-components/icons-ui';

class ElementWithIcon extends LitElement {
    protected render(): TemplateResult {
        return html`
            <sp-icon>
                ${AsteriskIcon()}
            </sp-icon>
        `
    }
}

customElements.define('element-with-icon', ElementWithIcon);

{
    width: 24, // number outlining the width to deliver the SVG element with
    height: 24, // number outlining the height to delivery the SVG element with
    hidden: false, // boolean representing whether to apply the `aria-hidden` attribute
    title: 'Icon title', // string of the title to deliver the icon with
}

import { AsteriskIcon } from '@spectrum-web-components/icons-ui';

console.log(AsteriskIcon());

/***
TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
***/

import { AsteriskIcon } from '@spectrum-web-components/icons-ui/src/icons.js';

console.log(AsteriskIcon());

/***
<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 36 36"
    role="img"
    fill="currentColor"
    height="24"
    width="24"
    aria-hidden="false"
    aria-label="Circle"
>
    <circle cx="18" cy="18" r="16"></circle>
</svg>
***/

import {
    AsteriskIcon,
    setCustomTemplateLiteralTag,
} from '@spectrum-web-components/icons-ui/src/icons.js';
import htm from 'htm';
import { h } from 'preact';

const hPreact = htm.bind(h);

setCustomTemplateLiteralTag(hPreact);

console.log(AsteriskIcon());

/***
VNode {nodeName: "svg", children: Array[1], attributes: Object, key: undefined, constructor: Object}
***/