[SalesForce] How to use SLDS SVG icons with lightning:tabset

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!

Best Answer

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>

Related Topic