JSPM – @spectrum-web-components/icon@0.6.0

Package Exports

@spectrum-web-components/icon/custom-elements.json
@spectrum-web-components/icon/package.json
@spectrum-web-components/icon/sp-icon
@spectrum-web-components/icon/sp-icon.js
@spectrum-web-components/icon/src/Icon.d.ts
@spectrum-web-components/icon/src/Icon.js
@spectrum-web-components/icon/src/Icon.js.map
@spectrum-web-components/icon/src/Icon.ts
@spectrum-web-components/icon/src/icon.css
@spectrum-web-components/icon/src/icon.css.d.ts
@spectrum-web-components/icon/src/icon.css.js
@spectrum-web-components/icon/src/icon.css.js.map
@spectrum-web-components/icon/src/icon.css.ts
@spectrum-web-components/icon/src/index.d.ts
@spectrum-web-components/icon/src/index.js
@spectrum-web-components/icon/src/index.js.map
@spectrum-web-components/icon/src/index.ts
@spectrum-web-components/icon/src/spectrum-config.js
@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css
@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-alert-small.css
@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-down-small.css
@spectrum-web-components/icon/src/spectrum-icon-arrow-down-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-down-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-arrow-down-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-arrow-down-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-left-medium.css
@spectrum-web-components/icon/src/spectrum-icon-arrow-left-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-left-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-arrow-left-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-arrow-left-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-up-small.css
@spectrum-web-components/icon/src/spectrum-icon-arrow-up-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-arrow-up-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-arrow-up-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-arrow-up-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-asterick.css
@spectrum-web-components/icon/src/spectrum-icon-asterick.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-asterick.css.js
@spectrum-web-components/icon/src/spectrum-icon-asterick.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-asterick.css.ts
@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css
@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-checkmark-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css
@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-small.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-down-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-large.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-large.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-large.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-large.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-large.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-medium.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-left-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-large.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-large.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-large.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-large.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-large.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-small.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-right-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-up-small.css
@spectrum-web-components/icon/src/spectrum-icon-chevron-up-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-chevron-up-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-chevron-up-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-chevron-up-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css
@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js
@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-large.css
@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.js
@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-medium.css
@spectrum-web-components/icon/src/spectrum-icon-cross-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-cross-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-cross-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-small.css
@spectrum-web-components/icon/src/spectrum-icon-cross-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-cross-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-cross-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-cross-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-dash-small.css
@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-dash-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-double-gripper.css
@spectrum-web-components/icon/src/spectrum-icon-double-gripper.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-double-gripper.css.js
@spectrum-web-components/icon/src/spectrum-icon-double-gripper.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-double-gripper.css.ts
@spectrum-web-components/icon/src/spectrum-icon-folder-breadcrumb.css
@spectrum-web-components/icon/src/spectrum-icon-folder-breadcrumb.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-folder-breadcrumb.css.js
@spectrum-web-components/icon/src/spectrum-icon-folder-breadcrumb.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-folder-breadcrumb.css.ts
@spectrum-web-components/icon/src/spectrum-icon-help-medium.css
@spectrum-web-components/icon/src/spectrum-icon-help-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-help-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-help-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-help-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-help-small.css
@spectrum-web-components/icon/src/spectrum-icon-help-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-help-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-help-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-help-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-info-medium.css
@spectrum-web-components/icon/src/spectrum-icon-info-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-info-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-info-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-info-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-info-small.css
@spectrum-web-components/icon/src/spectrum-icon-info-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-info-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-info-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-info-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-magnifier.css
@spectrum-web-components/icon/src/spectrum-icon-magnifier.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-magnifier.css.js
@spectrum-web-components/icon/src/spectrum-icon-magnifier.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-magnifier.css.ts
@spectrum-web-components/icon/src/spectrum-icon-skip-left.css
@spectrum-web-components/icon/src/spectrum-icon-skip-left.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-skip-left.css.js
@spectrum-web-components/icon/src/spectrum-icon-skip-left.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-skip-left.css.ts
@spectrum-web-components/icon/src/spectrum-icon-skip-right.css
@spectrum-web-components/icon/src/spectrum-icon-skip-right.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-skip-right.css.js
@spectrum-web-components/icon/src/spectrum-icon-skip-right.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-skip-right.css.ts
@spectrum-web-components/icon/src/spectrum-icon-star-outline.css
@spectrum-web-components/icon/src/spectrum-icon-star-outline.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-star-outline.css.js
@spectrum-web-components/icon/src/spectrum-icon-star-outline.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-star-outline.css.ts
@spectrum-web-components/icon/src/spectrum-icon-star.css
@spectrum-web-components/icon/src/spectrum-icon-star.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-star.css.js
@spectrum-web-components/icon/src/spectrum-icon-star.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-star.css.ts
@spectrum-web-components/icon/src/spectrum-icon-success-medium.css
@spectrum-web-components/icon/src/spectrum-icon-success-medium.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-success-medium.css.js
@spectrum-web-components/icon/src/spectrum-icon-success-medium.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-success-medium.css.ts
@spectrum-web-components/icon/src/spectrum-icon-success-small.css
@spectrum-web-components/icon/src/spectrum-icon-success-small.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-success-small.css.js
@spectrum-web-components/icon/src/spectrum-icon-success-small.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-success-small.css.ts
@spectrum-web-components/icon/src/spectrum-icon-triple-gripper.css
@spectrum-web-components/icon/src/spectrum-icon-triple-gripper.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon-triple-gripper.css.js
@spectrum-web-components/icon/src/spectrum-icon-triple-gripper.css.js.map
@spectrum-web-components/icon/src/spectrum-icon-triple-gripper.css.ts
@spectrum-web-components/icon/src/spectrum-icon.css
@spectrum-web-components/icon/src/spectrum-icon.css.d.ts
@spectrum-web-components/icon/src/spectrum-icon.css.js
@spectrum-web-components/icon/src/spectrum-icon.css.js.map
@spectrum-web-components/icon/src/spectrum-icon.css.ts
@spectrum-web-components/icon/src/spectrum-vars.json

Readme

Description

<sp-icon> renders an icon to the page. By default the name attribute will pair with separately registered icon sets to deliver the icons. When not present, <sp-icon> will subsequently check for its src attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.

Usage

yarn add @spectrum-web-components/icon

Import the side effectful registration of <sp-icon> via:

import '@spectrum-web-components/icon/sp-icon.js';

When looking to leverage the Icon base class as a type and/or for extension purposes, do so via:

import { Icon } from '@spectrum-web-components/icon';

Example

Names icons on this page are provided by the <sp-icons-medium> icon set. Learn how to create your own via sp-iconset.

<sp-icons-medium></sp-icons-medium>
<sp-icon name="ui:Magnifier"></sp-icon>

Variants

Icons are available in various sizes in Spectrum ranging from xxs to xxl, m being the default. We can specify the size via size attribute.

Size variants

<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
<sp-icon size="s" name="ui:Magnifier"></sp-icon>
<sp-icon size="m" name="ui:Magnifier"></sp-icon>
<sp-icon size="l" name="ui:Magnifier"></sp-icon>
<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>

Color icon

Icons apply their color as currentColor so change the color property of the element for customization.

<sp-icon name="ui:Magnifier" style="color: red;"></sp-icon>

Image icon

An image icon can be supplied via the src attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.

<sp-icon
    size="xxs"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="xs"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="s"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="m"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="l"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="xl"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="xxl"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>

Element icon

Icons can also be supplied as HTML elements to be applied via the default <slot>.

<sp-icon size="xxs">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>
<sp-icon>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>
<sp-icon size="xxl">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>

Accessibility

aria-hidden is set to true by default for Icons. The label attribute suppresses this and adds the label text as the aria-label of the icon.

<sp-icon name="ui:Magnifier" label="Magnify"></sp-icon>