Anatomy
Icon component shown with an Add icon asset. Inspect the HTML to see the props. Or use a screen reader to read the label.
- Container
- Icon glyph
- Label Visually Hidden
Options
Size
The size can be 100, 150, or 200. The size sets the width and height of the SVG.
Label
The label is required for screen readers. It is used to describe the icon to screen readers. It is also used as the aria-label for the icon. It is recommended to use a short, descriptive label. For example, "Go to Next Page".
API Reference
Icon
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| fill | enum string | WPDSThemeColorObject | currentColor | False | |
| className | string | False | ||
| id | string | ---- | False | |
| size | enum number | 100 | 150 | 200 | 100 | False | |
| label | The name of the icon to display. | string | ---- | True |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |
| alt | string | ---- | False |