Icon Chart-Line not working as expected as part of Heading in Segment-Placeholder

[pflenker]

Bug Report

Steps

Place chart-line icon in a Header icon inside a placeholder segment.

Expected Result

The icon is centered, and no white box is visible, the same as it works for other icons, e.g. chart-area

Actual Result

The icon is aligned to the left, and a white box is visible

Version

0.88.2

Testcase

https://codesandbox.io/s/semantic-ui-react-kt86q?fontsize=14

[brianespinosa]

@pflenker validated that this is present... however, this is coming from the CSS that the parent Semantic UI project generates. You can validate using regular markup and classnames on their examples that this is also present there. This is due to the fact that there are classes for .line elements inside of a placeholder. It is this class name collision that is causing the problem with the icon. You could open a report of this styling issue on the parent project. The styles there could probably add an exception for applying that .line class to only <div> elements. This is outside of the scope of SUIR.

[layershifter]

I created an issue in Fomantic UI for this: fomantic/Fomantic-UI#1619