Overview
Displays an icon. See the page on icons for design guidance and a list of available icons.
If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image icon.
Usage
Basic
Provide
an icon token identifier
via the icon prop.
Color
Use the color prop to apply
a palette color.
Size
Set the icon size using font-size or width and
height CSS properties.
Responsive
The previous example can be adapted to create a responsive container with an icon that scales according to the container's size. Resize the browser window to see how the icon adjusts.
Related
- Page on icons has design guidance and a list of available icons.
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
icon | Icon token identifier | string | — | true |
color | Color to apply to the icon | string |
null
| — |