import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup, TemplateResult } from 'lit';

/**
 * @summary Icons are symbols that can be used to represent various options within an application.
 * https://fonts.google.com/icons
 *
 * @csspart span - The internal span element.
 *
 * @event cx-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.
 * @event cx-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.
 * @cssproperty [--weight=400] - The weight of the icon.
 * @cssproperty [--grade=200] - The grade of the icon.
 * @cssproperty [--optical-size=48] - The optical size of the icon.
 */
export default class CxIcon extends CortexElement {
    static styles: CSSResultGroup;
    /** The name of the icon to draw. Available names depend on the icon library being used. */
    name: string;
    /** The src of the icon for custom icons. */
    src: string;
    /**
     * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and
     * ignored by assistive devices.
     */
    label: string;
    /** The variant of the icon to draw. */
    variant: 'outlined' | 'filled' | 'round' | 'sharp' | 'two-tone' | 'fa';
    /** The class of the Font Awesome icon to draw */
    iconClass: string;
    private customIconSrc;
    private customIconSvg;
    private loadingIconName;
    protected runFirstUpdated(): void;
    handleNameChange(): Promise<void>;
    handleLabelChange(): void;
    private onLoad;
    private onError;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-icon': CxIcon;
    }
}
