Storybook: Adapt to Font Material Icons syntax

[VictorBaron]

When trying to render a Material-Ui Icon identified by its Font material identifier, all I get is the identifier as a string

The code is as following:

import Icon from "@material-ui/core/Icon";

const MyComp = () => (<Icon>add</Icon>)

storiesOf("MyComp", module).add("default", () => <MyComp />);

I would expect to see the corresponding Icon.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[codecatalysts]

@VictorBaron I was having the same problem and after reading the docs about custom head tags, I was able to get the icons to work.

I crated and added the following to the preview-head.html file in the Storybook config directory.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!