Vertical Navigation Item Icon | Components | Lightning Component Reference

lightning-vertical-navigation-item-icon

A link and icon within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning-vertical-navigation-item-icon component is a navigation item that displays an icon to the left of the item label.

Here’s an example that creates a navigation menu with icons on the navigation items.

1<template>
2    <lightning-vertical-navigation>
3        <lightning-vertical-navigation-section label="Reports">
4            <lightning-vertical-navigation-item-icon
5                label="Recent"
6                name="recent"
7                icon-name="utility:clock"
8            >
9            </lightning-vertical-navigation-item-icon>
10            <lightning-vertical-navigation-item-icon
11                label="Created by Me"
12                name="created"
13                icon-name="utility:user"
14            >
15            </lightning-vertical-navigation-item-icon>
16            <lightning-vertical-navigation-item label="All Reports" name="all">
17            </lightning-vertical-navigation-item>
18        </lightning-vertical-navigation-section>
19    </lightning-vertical-navigation>
20</template>

Icons from the Lightning Design System are supported. Visit https://lightningdesignsystem.com/icons to view available icons.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The latest Lightning Design System resources become available only when the new release is available in your org.

Attributes

Name	Description	Type
href	The URL of the page that the navigation item goes to.	string
icon-name	The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.	string
label	The text displayed for this navigation item.	string
name	A unique identifier for this navigation item.	string