`<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 a
npm install @spectrum-web-components/iconname attribute will pair with separately registered icon sets to deliver the icons. When not present, src attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.
``
yarn add @spectrum-web-components/icon
Import the side effectful registration of 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';
Names of the icons on this page are provided by the icon set.
`html`
#### Sizes
Icons are available in various sizes in Spectrum ranging from s to xxl. By default an sp-icon without a size attribute will appear as if it were size="m". We can specify the size via size attribute.
`html`
#### Icon colors
Icons apply their color as currentColor, so change the color property of the element for customization.
`html`
#### 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 appropriate for your application's design requirements.
`html`
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
>
#### HTML/SVG Element icon
Icons can also be supplied via HTML elements and are applied via the default .
`html`
viewBox="0 0 22 22"
role="img"
fill="currentColor"
height="18"
width="18"
aria-hidden="true"
>
>
If no meaning is lost by visually hiding an icon, it is considered decorative. Decorative icons should not have a label and should be hidden from assistive technology. aria-hidden is set to true by default for icons.
If an icon does add meaning, a label is required. Use the label attribute to set the label's text as the aria-label of the icon and remove the aria-hidden attribute.
`html``