Can we display icons along with labels in lightning-tab in LWC. In Aura framework we can do using below code :

<lightning:tab >

 <aura:set attribute="label">
      First Tab
      <lightning:icon size="small" iconName="utility:success" />
 Tab1 Content

Similarly, is there any way to achieve the same in LWC?


You just need to add icon-name inside the ightning-tab.

<lightning-tab label="First Tab" icon-name={iconName}>
export default class App extends LightningElement {


  connectedCallback() {
    this.iconName = "utility:success";
  • Is there a way to set the icon-name dynamically through javascript? – sfdc07 Jun 2 '20 at 8:55
  • Yes, you can do it in js, I updated the answer. – Klecool Jun 2 '20 at 9:05
  • It worked..! Thank you for your help..! – sfdc07 Jun 2 '20 at 10:11
  • You're welcome! – Klecool Jun 2 '20 at 13:31

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.