how to use SLDS Icons in LWC

Question

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.

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>

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>
        <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>