Lightning Web Security breaks LWC with svg use tag

Question

When there is a LWC using svg use tag like suggested on Lightning design system site and Lightning Web Security is turned on (the setting Use Lightning Web Security for Lightning web components on Session Settings), it breaks LWC with an error

Error during LWC component connect phase: [String.prototype.startsWith called on null or undefined]

Listing of example component

<template>
    Web Security
    <lightning-combobox
        label="Select"
        options={svgOptions}
        onchange={handleSelection} >
    </lightning-combobox>

    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href={svg}></use>
    </svg>
</template>

Listing of example JS file

import { LightningElement } from 'lwc';

export default class WebSecurity extends LightningElement {

    svgOptions = [{label:'Utility',value:'/assets/icons/utility-sprite/svg/symbols.svg#notification'},{label:'Standard & Custom',value:'/assets/icons/standard-sprite/svg/symbols.svg#account'}];

    handleSelection(event) {
        this.svg = event.detail.value;
    }
}

Answer 1

I quickly reproduced this on what you shared - but, I had no issue with this code once I added a check to make sure svg is not null as I assume it has no value initially.

<template if:true={svg}>
    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href={svg}></use>
    </svg>
</template>

The above prevents the error, but to display the icons you'll also want to update your links to use _slds vs. asset in the path. Noted in some other answers.

svgOptions = [
    {
        label:'Utility',
        value:'/_slds/icons/utility-sprite/svg/symbols.svg#notification'
    },
    {
        label:'Standard Custom',
        value:'/_slds/icons/standard-sprite/svg/symbols.svg#account'
    }
];

You can also consider using lightning-icon instead and dynamically switching the icon-name.

Answer 2

Update (as of 11th May 2022):

Salesforce has confirmed the bug and opened known issue.

Details below.

I have opened a case in Salesforce support.

There is some issue in the aura_proddebug.js:14475:12 and aura_prod.js:49:2828

    StringStartsWith()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:14475:12
    sanitizeSvgHrefValue()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:15663:9
    Object.value [as sanitizeAttribute]()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_proddebug.js:34752:18

aura_prod.js

tt()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:49:2828
pi()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:78:1359
Object.value [as sanitizeAttribute]()@https://static.lightning.force.com/cs92/auraFW/javascript/2yRFfs4WfGnFrNGn9C_dGg/aura_prod.js:100:134492