lightning:tree icon doesn't display

[kacrouse]

The chevron icon in the lightning:tree component does not display. Looking into the use element inside the svg, I can see that the xlink:href attribute is set to undefined/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright. The undefined at the beginning appears to be the issue.

[lukeis]

this is a salesforce issue, rather than one with aura ('lightning' is a custom namespace only available in salesforce). Can you follow up with a case to salesforce?

[kacrouse]

Will do. Thanks for pointing me in the right direction!

[Raghvendra23]

Hi kacrouse,

I am facing the same issue with lightning:tree. Have you got any solution for your problem?

Thanks, RR

[kacrouse]

Hi Raghvendra23,

Is your org in the Summer '18 release? It appears that I don't have the issue anymore and my guess is that Summer '18 fixed it.

If you do still have it, I found a workaround, although it is quite brittle due to being tightly coupled to the DOM.

The issue only occurred for me in LightningOut, so this fix goes in the Visualforce page that holds your components. If you put this code in the callback function that gets called after your top-level component is created (the fourth parameter in $Lightning.createComponent), it replaces the bad xlink:href with the correct value.

const treeObserver = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation) {
        if(mutation.type === 'childList' &&
            mutation.addedNodes[0] &&
            mutation.addedNodes[0].nodeName === 'BUTTON'
        ) {
            Array.prototype.slice.call(
                mutation.addedNodes[0].getElementsByTagName('lightning-primitive-icon')
            ).forEach(function(element) {
                element.firstChild.firstChild.setAttribute(
                    'xlink:href',
                    '/_slds/icons/v7.31.0/utility-sprite/svg/symbols.svg#chevronright'
                );
            });
        }
    });
});

Array.prototype.slice.call(
    document.getElementsByTagName('lightning-tree') || []
).forEach(function(tree){
    treeObserver.observe(tree, {childList: true, subtree: true});
});

[Raghvendra23]

This is awesome kacrouse! Thanks for your help.