2

I'm doing some testing with the new lightning:tabset component, and haven't found a way to get it to use the SLDS SVG icons for the left and right buttons.

I found the "Lightning SVG Icon Component Helper" article, and also another post on the new Winter 17 lightning:icon feature, but those look like they're for using an icon in a specific place in your own markup, not for modifying a Salesforce provided component like lightning:tabset (unless I'm not understanding what the component helper is doing).

How do you set things up in the app or component so that Salesforce-provided components like lightning:tabset can access SVG resources correctly?

Below is a very simple sample component. When I load this, I see these two errors in the console, and the left and right icons don't display in the tabset:

Unknown token "lightning.utilitySprite" default value was used instead.
Failed to load resource: the server responded with a status of 404 (Not Found)
https://(mydomainname)--(sandboxname).lightning.force.com/assets/icons/utility-sprite/svg/symbols.svg#chevronleft

I currently have my SLDS as a static resource (built it as scoped) and referenced in the app, as shown below. Everything else about the SLDS works fine, except for the SVG icons not being found.

App (testDynamicTabset_App):

<aura:application >
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="(scoped_name)-slds">
        <c:testDynamicTabset_Parent />
    </div>
</aura:application>

Component (testDynamicTabset_Parent):

<aura:component >
    <lightning:tabset aura:id="dynamicTabset">
        <lightning:tab aura:id="tab1" label="Tab 1">Tab 1 Body</lightning:tab>
        <lightning:tab aura:id="tab2" label="Tab 2">Tab 2 Body</lightning:tab>
        <lightning:tab aura:id="tab3" label="Tab 3">Tab 3 Body</lightning:tab>
        (omitted middle lines)
        <lightning:tab aura:id="tab3" label="Tab 18">Tab 18 Body</lightning:tab>
        <lightning:tab aura:id="tab3" label="Tab 19">Tab 19 Body</lightning:tab>
        <lightning:tab aura:id="tab3" label="Tab 20">Tab 20 Body</lightning:tab>
    </lightning:tabset>

</aura:component>

Thanks!

Improve this question
1
  • Where us the reference you have made here to SVG?
    – Mohith Shrivastava
    Oct 24, 2016 at 23:47

1 Answer 1

Reset to default
2

With Winter 17 ,I would use lightning:icon instead of SVG .

Below is the markup for same 

<aura:component>
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
</aura:component>

If you observe iconName attribute then you can use any icon from the set defined here

Be sure to use lower case letters and the name is separated by ":" where left string will use either "action,custom,doctype,standard,utility" while right string after colon will be name of the icon .

Update

The label attribute of the lightning:tab is defined of type "Component[]" which means you can use aura:set explicitly to set these to any other lightning component .Using this property of the lightning component to our advantage the tag will be like below

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

Improve this answer
5
  • I can see using lightning:icon to place an icon in my own markup, but how do I use it to modify lightning:tabset behavior so that it's displaying the left and right chevron icons on its own buttons (the left and right buttons that display when the number of tabs is wider than can be displayed)?
    – Florissant53
    Oct 25, 2016 at 0:17
  • @Florissant53 Updated the answer .See if that helps
    – Mohith Shrivastava
    Oct 25, 2016 at 20:01
  • Thanks, but it's not an attribute of the lightning tab I'm trying to change, it's the tabset. When the tabset displays, and there are more tabs than will fit, it will automatically display two buttons on the right side that are used to move the entire row of tabs left or right. These buttons have an SVG icon in them (chevronleft and chevronright) but these icons don't get displayed. The lightning:tabset component itself seems to have some internal reference to where it expects these SVG icons to be, but I can't seem to tie that together with the files in the SLDS resource that is loaded.
    – Florissant53
    Oct 25, 2016 at 20:37
  • I see now .I think it will require you to manually code the CSS as per the need and do not think there is OOB way to address this .Thanks
    – Mohith Shrivastava
    Oct 25, 2016 at 20:38
  • 1
    Yep, that's what I was afraid of. I suspect the combination of lightning:tabset being in beta, and default use of SVG icons in a SLDS loaded as a resource means there's no way to tie them together. Lightning growing pains I guess. Thanks!
    – Florissant53
    Oct 25, 2016 at 20:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .