Icon
Displays icons from the Vivid Icons Library using predefined colors and sizes.
Informative icons convey information not otherwise present in the page's text.
You must set the label attribute on informative icons to provide an accessible name.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<div class="number">
<vwc-icon name="telephone-line" label="Telephone:"></vwc-icon> 0123 456 7890
</div>
<div class="number">
<vwc-icon name="fax-line" label="Fax:"></vwc-icon> 0123 456 7890
</div>
<style>
.number {
display: flex;
align-items: center;
gap: 8px;
margin: 8px;
}
</style>
Decorative icons duplicate information already present in the text or are purely aesthetic. They are used to enhance the visual appearance of the content.
There is no need to provide the Icon with a label as the icon's meaning is already described by the visible text. When label is not provided, the aria-hidden is set to true automatically, so there is no need for you to set it.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <p><vwc-icon name="flag-united-states"></vwc-icon> United States</p>
Icons are non-interactive elements. You cannot use them to trigger actions or place a tooltip on them.
If you need an interactive component, use an icon-only Button instead.