Icon bug: Using information--filled and closed icons together causes the info icon to render incorrectly

[davefp]

What package(s) are you using?

• carbon-components version 10.10.1
• @carbon/icons version 10.9.1
• carbon-components-react

Detailed description

We are using icons from @carbon/icons version 10.9.1 (latest at time of writing) in a vanilla js/css environment. We have carbon-components version 10.10.1.

We are inlining our SVGs straight from the package using the inline_svg gem.

When rendering an inline notification that has both the information--filled and closed icon in it, the styles of the two interact badly and produce the following:

The info icon is a dark grey square.

Specifically, the style block embedded in the close icon specifies .cls-1{fill:#231f20;} while the style block in the info icon specifies .cls-1{fill:none;}. One is overriding the other leading to the transparent rectangle around the info icon to be filled grey.

I am able to reproduce this issue in FireFox 72 and Chrome 80

Steps to reproduce the issue

1. Generate a page with information--filled and close icons inlined directly from the @carbon/icons package.
2. Render the page in a browser.

Codesandbox demonstrating the issue: https://codesandbox.io/s/wizardly-bhabha-igb9x

Additional information

None

[tw15egan]

@joshblack is there any way we can run SVGO on the raw svg assets? Seems like that would resolve this issue.

[joshblack]

@tw15egan I definitely think we can 👍 We do process them with SVGO for the modules that get published but don't for the svg folder. It seems like a great thing we can add in though.

[tw15egan]

Related: #5226 (comment)

[davefp]

@joshblack @tw15egan That would be excellent, thanks for the responses.