## class: `WyIcon`, `wy-icon`

Icon provider with optional overlay icon.

**Used sub components**

*   [`<wy-icon-stack>`](./wy-icon)

### Fields

| Name          | Type                                       | Default | Description                                                                                    | Inherited From |
| ------------- | ------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | -------------- |
| `name`        | `iconNamesType \| "" \| undefined`         |         | Name of the predefined icon to use.                                                            |                |
| `overlayName` | `iconNamesType \| "" \| undefined`         |         | Name of any overlay icon to use.                                                               |                |
| `color`       | `string`                                   | `""`    | Color token name.&#xA;Set to \`native\` to use original colors in SVG icons.                   |                |
| `size`        | `number`                                   | `24`    | The size of the icon in pixels. The pixels are translated to rem size with a base of 16px/rem. |                |
| `kind`        | `FileKindType \| "text-icon" \| undefined` |         | Kind of icon or file type.                                                                     |                |
| `ext`         | `string \| undefined`                      |         | Any file extension. Sets what color to use for some extensions.                                |                |
| `inline`      | `boolean`                                  | `false` | Adjust rendering to fit in inline layout.                                                      |                |
| `first`       | `boolean`                                  | `false` | Adjust rendering to fit when placed first.                                                     |                |
| `last`        | `boolean`                                  | `false` | Adjust rendering to fit when placed last.                                                      |                |
| `layer`       | `boolean`                                  | `false` | Adjust rendering so that the icon is placed in an overlaying layer.                            |                |
| `state`       | `boolean`                                  | `false` | Make the icon have a visible state that can be toggled by setting the \`active\` property.     |                |
| `active`      | `boolean`                                  | `false` | Active state of the icon. Makes the icon visible when state mode is enabled.                   |                |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `name`        | name        |                |
| `overlayName` | overlayName |                |
| `color`       | color       |                |
| `size`        | size        |                |
| `kind`        | kind        |                |
| `ext`         | ext         |                |
| `inline`      | inline      |                |
| `first`       | first       |                |
| `last`        | last        |                |
| `layer`       | layer       |                |
| `state`       | state       |                |
| `active`      | active      |                |

### CSS Parts

| Name                    | Description                                     |
| ----------------------- | ----------------------------------------------- |
| `wy-icon-wrapper`       | Wrapper around the icon.                        |
| `wy-icon`               | SVG icon.                                       |
| `wy-icon-current-color` | When using inherited color for fill.            |
| `wy-kind-{kind}`        | Dynamic part set when using \`kind\` property.  |
| `wy-ext-{ext}`          | Dynamic part set when using \`ext\` property.   |
| `wy-icon-color-{color}` | Dynamic part set when using \`color\` property. |
| `wy-icon-first`         | When defined as \`first\`.                      |
| `wy-icon-last`          | When defined as \`last\`.                       |
| `wy-icon-inline`        | When defined as \`inline\`.                     |
| `wy-icon-stack-layer`   | When defined with \`layer\`.                    |
| `wy-icon-state`         | When defined with \`state\`.                    |
| `wy-active`             | When defined as active.                         |

### Slots

| Name | Description                                  |
| ---- | -------------------------------------------- |
|      | Any content to display within the icon area. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |
| `uniqueId`    | protected |      | `` `wy-icon-${S4()}` ``           |             |                |

</details>

<hr/>

## class: `WyIconStack`, `wy-icon-stack`

Set of stacked icons. Used for state icons or overlayed icons.

### Slots

| Name | Description         |
| ---- | ------------------- |
|      | Any icons to stack. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## class: `WyIconDisplay`, `wy-icon-display`

Displays a large icon with optional text and meta content.

### Fields

| Name   | Type      | Default | Description          | Inherited From |
| ------ | --------- | ------- | -------------------- | -------------- |
| `fill` | `boolean` | `false` | Fills the flex area. |                |

### Attributes

| Name   | Field | Inherited From |
| ------ | ----- | -------------- |
| `fill` | fill  |                |

### CSS Parts

| Name                   | Description         |
| ---------------------- | ------------------- |
| `wy-icon-display`      | The icon container. |
| `wy-icon-display-icon` | The icon.           |
| `wy-icon-display-text` | Any text.           |
| `wy-icon-display-meta` | Any meta content.   |

### Slots

| Name   | Description                  |
| ------ | ---------------------------- |
|        | The icon to display.         |
| `text` | Any text to display.         |
| `meta` | Any meta content to display. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name              | Declaration   | Module                       | Package |
| --------------------------- | ----------------- | ------------- | ---------------------------- | ------- |
| `js`                        | `WyIcon`          | WyIcon        | lib/components/ui/wy-icon.ts |         |
| `custom-element-definition` | `wy-icon`         | WyIcon        | lib/components/ui/wy-icon.ts |         |
| `js`                        | `WyIconStack`     | WyIconStack   | lib/components/ui/wy-icon.ts |         |
| `custom-element-definition` | `wy-icon-stack`   | WyIconStack   | lib/components/ui/wy-icon.ts |         |
| `js`                        | `WyIconDisplay`   | WyIconDisplay | lib/components/ui/wy-icon.ts |         |
| `custom-element-definition` | `wy-icon-display` | WyIconDisplay | lib/components/ui/wy-icon.ts |         |
