1

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">
                                                            <use
                                                                xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account">
                                                            </use>
                                                        </svg>
                                                        <span class="slds-assistive-text">Description of icon when
                                                            needed</span>
                                                    </span>
                                                    {stu.Name}</a>
                                            </li>   </ul>

                                    </nav>
                                </div>
                            </template>

1 Answer 1

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>
        <lightning-vertical-navigation-item-icon label="Contacts" name="reports_usercreated" icon-name="standard:contact">
        </lightning-vertical-navigation-item-icon>
    </lightning-vertical-navigation-section>
</lightning-vertical-navigation>

Documentation

Or

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>
3
  • 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. Apr 20, 2020 at 8:50
  • lightning-icon wil not able to add label, In my case it will not be used as expected Apr 20, 2020 at 8:51
  • @user3214361 You can do that actually, check the playground Feb 13, 2021 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.