HTML5 Icon in Storybook

[echarles]

Description

Reproduce

1. Run yarn storybook in the ui-components package
2. Browse with chrome http://localhost:9001/?path=/story/iconreact--html-5-icon
3. Browse with firefox http://localhost:9001/?path=/story/iconreact--html-5-icon
4. See the differences as show on the below images.

HTML5 Icon on Chrome is not displayed

HTML5 Icon on Firefox is displayed

Expected behavior

Chrome should display the icon as Firefox is doing.

Context

• Operating System and version: MacOSx
• Browser and version: Latest versions
• JupyterLab version: https://github.com/jupyterlab/jupyterlab/tree/fbaf591b7ad68eee44bb3b96b5f3a2f4f9370c11

[telamonian]

Try replacing the contents of the html5Icon function:

jupyterlab/packages/ui-components/stories/iconreact.stories.tsx

Lines 20 to 24 in fbaf591

	export const html5Icon = () => (
	<div className={'foobar'}>
	<DefaultIconReact name={'html5'} kind={'launcherSection'} center={true} />
	</div>
	);

with:

  <div className={'foobar'} style={{alignItems: 'center', display: 'flex', height: '300px', width: '300px'}}>
    <DefaultIconReact name={'html5'} height={'200px'} width={'200px'} center={true} />
  </div>

and you should see the html5 icon show up. You can even do it while storybook is running.

The reason why the html5 icon appears strange initially is that kind={'launcherSection'} relies on some CSS from @jupyterlab/launcher that doesn't get imported by storybook. I set this up on purpose this way in order to explore the situation with missing/broken CSS. I did not realize, however, that the html5 icon with broken CSS shows up differently in different browsers.

In any case, the use of DefaultIconReact is getting phased out by #7700, so I'll update these stories with something more consistent.

[echarles]

Thx @telamonian. I let you update the stories as part of #7700 and will close this issue when it will be done.

Regarding enforcing the height and width, I would have expected all icons shipped by jupyterlab to avoid the same size, let's say fitting eg in a 100px square box. Having do define the size in an enclosing div upon via the props of the react component is not that appealing. Will this still be needed after #7700?

I would love to have as props a scalingFactor that would resize the default size by the given value.