Title icon doesn't support svg with gradient

[ajbozarth]

Description

When setting icon in Title to an svg with a linearGradient def the part of the svg that uses the gradient in it's fill is not displayed.

Reproduce

On way to see this is to replace a working svg file with the official R logo I've attached in whatever app (eg jupyterlab) uses title, which uses gradients and note that the icon does not display despite the svg being in the dom.

This issue was discovered while working on https://github.com/elyra-ai/elyra/pull/1435 an Elyra issue where we add an R editor to JupyterLab. For that issue we used the deprecated iconClass functionality as a workaround.

R Logo svg: https://github.com/elyra-ai/elyra/blob/master/packages/ui-components/style/icons/r-logo.svg

Expected behavior

Any valid svg passed to Title.icon should display properly

Context

• Operating System and version: MacOS 10.15.6
• Browser and version: Chome 89.0.4389.90 and FireFox 78.9.0esr (The issue is not seen in Safari)
• JupyterLab version: 3.0.12

[ajbozarth]

@telamonian any ideas on this? The issue only occurs for the tab icons, the same icon works fine in the file browser and launcher. There is another related bug with svgs that use id's causing duplicate id's in the dom, which come out in this bug by causing all instances of the icon to disappear when the icon is used in a tab (they appear again once the tab is closed), but even with unique id's this bug still occurs.

[aaraney]

I am also facing this issue. Can anyone speak to the cause of this?

[vidartf]

@ajbozarth / @aaraney Is this an issue with lumino directly, or an issue with icons in JupyterLab? If the latter, this issue should probably be moved to the lab repo.

[ajbozarth]

This was a while ago so I can't remember exactly, but I believe I did trace the issue down to a lumino issue when trying to figure it out. I couldn't figure out why it was happening, only that it happened in lumino code, not lab code.

[ajbozarth]

I just realized I never shared the origin of this problem on this issue. The problem is that gradients in svgs file leverage html id to render. The current implementation of LabIcon has issues with ids though since it creates duplicates of the svgs across the DOM, meaning duplicate id's which can cause many issues, including this one since ids are meant to be unique in a given html dom

[krassowski]

So we would need to de-duplicate IDs when instantiating icons, either by dropping repeated definitions or by adding a unique prefix. Sounds doable. The browser already does the SVG parsing anyways, so we would "just" need to iterate over nodes and swap the IDs as needed. Is this correct?

[ajbozarth]

So we would need to de-duplicate IDs when instantiating icons, either by dropping repeated definitions or by adding a unique prefix. Sounds doable. The browser already does the SVG parsing anyways, so we would "just" need to iterate over nodes and swap the IDs as needed. Is this correct?

Afaik this would be the correct approach, the "just" here was just a bit more bandwidth than I had to address it so I decided to update our svgs to remove the id's instead.