# dds-icon



<!-- Auto Generated Below -->


## Overview

A glyph from the icon set, drawn at a fixed size and tinted by a colour role. It is decorative and hidden from assistive technology unless the consumer sets `aria-label`, which turns it into an image with that name.

## Usage

### Icon

Set `name` to the key of a glyph in the icon set.

```html
<dds-icon name="globe"></dds-icon>
```

#### Decorative by default

With no `aria-label`, the icon is hidden from assistive technology. Use it beside text that already says what it means.

#### Giving an icon a name

When the icon is the only thing that carries meaning, set `aria-label` on the element. It then becomes an image with that name. The component ships no text of its own, so the name is always yours to supply and translate.

```html
<dds-icon name="globe" aria-label="Global"></dds-icon>
```

#### Size

`size` picks a step from `2xs` to `l` and defaults to `m`.



## Properties

| Property            | Attribute | Description                                                                            | Type                                                                                                     | Default     |
| ------------------- | --------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------- |
| `color`             | `color`   | Which colour role the glyph takes, or `inherit` to follow the surrounding text colour. | `"disabled" \| "error" \| "inherit" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning"` | `"inherit"` |
| `name` _(required)_ | `name`    | The key of the glyph to draw from the icon set.                                        | `string`                                                                                                 | `undefined` |
| `size`              | `size`    | Which step of the size scale to render at.                                             | `"2xs" \| "l" \| "m" \| "s" \| "xs"`                                                                     | `"m"`       |


## Shadow Parts

| Part     | Description                       |
| -------- | --------------------------------- |
| `"root"` | The element that draws the glyph. |


## Dependencies

### Used by

 - [dds-avatar](../avatar)
 - [dds-breadcrumb](../breadcrumb)
 - [dds-button](../button)
 - [dds-checkbox](../checkbox)
 - [dds-flag](../flag)
 - [dds-link](../link)

### Graph
```mermaid
graph TD;
  dds-avatar --> dds-icon
  dds-breadcrumb --> dds-icon
  dds-button --> dds-icon
  dds-checkbox --> dds-icon
  dds-flag --> dds-icon
  dds-link --> dds-icon
  style dds-icon fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*