icon.md

Icon

Enables you to display basic icons that match the design system sizes, colors, and typography.

Properties

alt

Specifies alternate text for a custom icon. We recommend that you provide this for accessibility. This property is ignored if you use a predefined icon or if you set your custom icon using the svg slot.

Type: String

Required: No

className

Adds the specified classes to the root element of the component.

Type: String

Required: No

id

Adds the specified ID to the root element of the component.

Type: String

Required: No

name

Specifies the icon to be displayed.

Type: String

Valid values: add-plus | angle-left-double | angle-left | angle-right-double | angle-right | angle-up | angle-down | arrow-left | bug | call | calendar | caret-down-filled | caret-down | caret-left-filled | caret-right-filled | caret-up-filled | caret-up | contact | close | copy | download | edit | ellipsis | envelope | expand | external | file-open | file | filter | folder-open | folder | heart | key | lock-private | menu | microphone | notification | refresh | search | settings | share | status-in-progress | status-info | status-negative | status-pending | status-positive | status-stopped | status-warning | treeview-collapse | treeview-expand | undo | unlocked | upload | user-profile | view-full | view-horizontal | view-vertical | zoom-in | zoom-out

Required: No

size

Specifies the size of the icon. If you set size to inherit, an icon size will be assigned based on the icon's inherited line height. For icons used alongside text, ensure the icon is placed inside the acompanying text tag. The icon will be vertically centered based on the height.

Type: String

Default: "normal"

Valid values: small | normal | medium | big | large | inherit

Required: No

url

Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG. For SVG icons, use the svg slot instead. If you set both url and svg, svg will take precedence.

Type: String

Required: No

variant

Specifies the color variant of the icon. The normal variant picks up the current color of its context.

Type: String

Default: "normal"

Valid values: normal | disabled | error | inverted | link | subtle | success | warning

Required: No

Slots

svg

Specifies the SVG of a custom icon. Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states. When this property is set, the component will be decorated with aria-hidden="true". Ensure that the svg element:

• has attribute focusable="false".
• has viewBox="0 0 16 16".

If you set the svg element as the root node of the slot, the component will automatically

• set stroke="currentColor", fill="none", and vertical-align="top".
• set the stroke width based on the size of the icon.
• set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the svg element into a span and ensure icon size is not set to inherit. You can still set the stroke to currentColor to inherit the color of the surrounding elements.

If you set both url and svg, svg will take precedence.

Note: Remember to remove any additional elements (for example: defs) and related CSS classes from SVG files exported from design software. In most cases, they aren't needed, as the svg element inherits styles from the icon component.

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.