I have slds-nav-vertical which will iterate the list with the icon. I'm using slds-icon_container But icon is not coming it's Look like Below.

enter image description here

On clicking the above link getting following error Uncaught TypeError: Cannot read property 'menuItemId' of undefined throws at

  <template for:each={studentdata} for:item="stu" for:index="index">
                                <div class="demo-only slds-p-left_xx-large" key={stu.Id}>
                                    <nav class="slds-nav-vertical" aria-label="Sub page">
                                        <ul aria-describedby="entity-header">

                                            <li class="slds-nav-vertical__item">
                                                <a class="slds-nav-vertical__action" data-menu-item-id={stu.Id}
                                                    aria-current="true" onclick={studentInformation}>
                                                    <span class="slds-icon_container slds-icon-standard-account"
                                                        title="Description of icon when needed">
                                                        <svg class="slds-icon" aria-hidden="true">
                                                        <span class="slds-assistive-text">Description of icon when
                                            </li>   </ul>


1 Answer 1


You can use the standard components for the verticle navigation.

  1. lightning-vertical-navigation
  2. lightning-vertical-navigation-section
  3. lightning-vertical-navigation-item-icon

Here is the sample code.

<lightning-vertical-navigation selected-item="reports_recent">
    <lightning-vertical-navigation-section label="Reports">
        <lightning-vertical-navigation-item-icon label="Accounts" name="reports_recent" icon-name="standard:account">
        <lightning-vertical-navigation-item-icon label="Contacts" name="reports_usercreated" icon-name="standard:contact">



Use lightning-icon component, it's prebuilt in LWC framework.

<lightning-icon icon-name="standard:account" alternative-text="Account" title="Account"></lightning-icon>

All SLDS icons are supported out of the box in this component.

Refer to detailed documentation.

You can also get the icon on the button by just specifying the name of the icon.

<lightning-button label="Neutral"  icon-name="standard:account" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
  • It's s vertical tab, which we need to display the sub tab with the hyperlink for that i need to add Icon for that.
    – SK2889
    Apr 20, 2020 at 8:50
  • lightning-icon wil not able to add label, In my case it will not be used as expected
    – SK2889
    Apr 20, 2020 at 8:51
  • @user3214361 You can do that actually, check the playground Feb 13, 2021 at 11:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .