Icon

Displays icons from the Vivid Icons Library using predefined colors and sizes.

Usage

import '@vonage/vivid/icon';

or, if you need to use a unique prefix:

import { registerIcon } from '@vonage/vivid';

registerIcon('your-prefix');

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
	import { registerIcon } from 'vivid-bundle';
	registerIcon('your-prefix');
</script>

<your-prefix-icon name="close-line"></your-prefix-icon>

<script setup lang="ts">
	import { VIcon } from '@vonage/vivid-vue';
</script>
<template>
	<VIcon name="close-line" />
</template>

Label

Use the label attribute to provide the Icon with a descriptive label so that it's meaning can be conveyed to screen reader users.

See the Accessibility section for more information.

The label attribute was added as an alternative to using the aria-label attribute. It is preferable because using aria-label on non-interactive elements (like Icon) idoes not work consistantly across screen readers.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-icon label="Close dialog" name="close-line" class="small-icon"></vwc-icon>

Custom Size

If the component is used without a size, it will use the current font-size value.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-icon name="close-line" class="small-icon"></vwc-icon>
30px

<style>
	.small-icon {
		font-size: 30px;
	}
</style>

Custom Color

If the component is used without a connotation, it will use the current text color.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-icon class="icon" name="heart-solid"></vwc-icon>

<style>
	.icon {
		color: var(--vvd-color-announcement-400);
	}
</style>

API Reference

Properties

Name	Type	Description
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
connotation	Enum: `accent` `cta` `success` `alert` `warning` `information`	The connotation the icon should have.
size	Enum: -6 -5 -4 -3 -2 -1 0 1 2 3 4 5
name	Enum: `[icon-name]`	Indicates which icon to resolve. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/

Events

Name	Event Type	Description
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.

Slots

Name	Description
default	Default slot.