Add Icon In Lightning Web Component Tab

Lightning Web Component has excellent element lightning-tab that keeps related information in single container. By default it will not show icons along with label. Normally we want to show icons as well with label. Let us see how we can add icons in lightning tab component.

Example of lightning-tab without icon.

<template>
      <lightning-card>
           <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Tab Example with Icon
        </h3>
        <lightning-tabset>
            <lightning-tab label="Contact Information">
                <lightning-input label="Name"> </lightning-input>
                <lightning-input label="Email"> </lightning-input>
                <lightning-input label="Phone"> </lightning-input>
            </lightning-tab>
            <lightning-tab label="Contact Address">
                 <lightning-input label="Address1"> </lightning-input>
                 <lightning-input label="Address2"> </lightning-input>
                 <lightning-input label="Zip"> </lightning-input>
            </lightning-tab>
        </lightning-tabset>
      </lightning-card>
</template>

This will produce below output.

Let us add icon in lightning-tab. Add below code in component js file.

contactIcon;
addressIcon;
connectedCallback() {
        this.addressIcon = "standard:address";
        this.contactIcon = "action:add_contact";
}

Put this icon variable in html template file in icon-name attribute of lightning-tab element.

<template>
      <lightning-card>
           <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Tab Example with Icon
        </h3>
        <lightning-tabset>
            <lightning-tab label="Contact Information" icon-name={contactIcon}>
                <lightning-input label="Name"> </lightning-input>
                <lightning-input label="Email"> </lightning-input>
                <lightning-input label="Phone"> </lightning-input>
            </lightning-tab>
            <lightning-tab label="Contact Address" icon-name={addressIcon}>
                 <lightning-input label="Address1"> </lightning-input>
                 <lightning-input label="Address2"> </lightning-input>
                 <lightning-input label="Zip"> </lightning-input>
            </lightning-tab>
        </lightning-tabset>
      </lightning-card>
</template>