function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Arrielle KooimanArrielle Kooiman 

lightning:icon not showing up inside lightning:tab

I have a community that has been live for about half a year and had used lightning:tabset in the community to replace the generic menu. In my lightning:tab I had added a lightning:icon. As of the most recently release, all of the icons that were originally working, are broken. 

Here's some condensed code:
//The App

<aura:application access="global" extends="force:slds"> <!-- ltng:outApp -->
    <c:PilotConsoleLightingCmp />
</aura:application>  

//The Component 
<aura:component>    
    <lightning:tabset>
            <lightning:tab>
                <aura:set attribute="label">
                    Item One
                    <lightning:icon iconName="action:approval" alternativeText="???"/>
                </aura:set>
            </lightning:tab>
     </lightning:tabset>
</aura:component>

If I move the lightning:icon outside of the tab, it shows up. Otherwise it only shows the alternativeText. 
Any idea how I can get around this or why it's happening? It seems like some functionality is just plain broken to me. 
 
Best Answer chosen by Arrielle Kooiman
Khan AnasKhan Anas (Salesforce Developers) 
Hi Arrielle,

I trust you are doing very well.

According to Winter 19 release notes (https://releasenotes.docs.salesforce.com/en-us/winter19/release-notes/rn_lc_components.htm):

The label attribute now supports text only. Previously the label supported a component type, and you could include, for example, an icon in the tab’s label. If you use a component in a lighting:tab label now, only the text portion of the label value displays. Any CSS classes that are applied are ignored.

In order to resolve this issue in displaying the Lightning:icon in Lightning:tabset you need to make a slds-vertical-tabs.
You can reference in this link: https://www.lightningdesignsystem.com/components/vertical-tabs/

Reference: https://salesforce.stackexchange.com/questions/235979/lightningicon-is-not-working-in-lightningtabset-after-an-update-of-winter-19


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Arrielle,

I trust you are doing very well.

According to Winter 19 release notes (https://releasenotes.docs.salesforce.com/en-us/winter19/release-notes/rn_lc_components.htm):

The label attribute now supports text only. Previously the label supported a component type, and you could include, for example, an icon in the tab’s label. If you use a component in a lighting:tab label now, only the text portion of the label value displays. Any CSS classes that are applied are ignored.

In order to resolve this issue in displaying the Lightning:icon in Lightning:tabset you need to make a slds-vertical-tabs.
You can reference in this link: https://www.lightningdesignsystem.com/components/vertical-tabs/

Reference: https://salesforce.stackexchange.com/questions/235979/lightningicon-is-not-working-in-lightningtabset-after-an-update-of-winter-19


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Arrielle KooimanArrielle Kooiman
Hi Khan Anas,

Thanks so much for the detailed reply. I'm surprised that the lightning:tab's label no longer has the ability for styling and the new inability to add anything other than text. Seems like a step backwards to me, but I suppose it's nice to see it was an intential step backwards rather than a bug. 

Thanks so much for details about the cause and a workaround!

-Arri