CODEWITHSUNDEEP
reactjsmaterial-designmaterial-ui
Ben Carp
Ben Carp

Reputation: 26518

Adding Material UI Icon to a FontIcon Material-UI component in React

I'm trying to display a Material-UI Icon with a Material-UI FontIcon component in React. My code: 

<FontIcon className="material-icons"/> 
    Help 
</FontIcon>

Only text is displayed on the screen.

The Icon is the Help icon from https://material.io/icons/ . The icon library was installed. According to http://www.material-ui.com/#/components/font-icon we should

If the icon font supports ligatures, reference the font in the className and enclose the icon name in the FontIcon tag. I installed the library, but I'm not sure why it is not working?

What is the right way to implement this?

Upvotes: 1

Views: 3855

Answers (1)

codejockie
codejockie

Reputation: 10844

From the example at the link you provided, it says the public font should be referenced in the code.

<FontIcon className="material-icons" style={iconStyles}>home</FontIcon>

You could decide to download the icons using npm:

npm install material-design-icons

Or better yet add the code below to the head section of your main html file.

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

For your case, it should be:

<FontIcon className="material-icons">help</FontIcon>

Note I used the lowercase help and not Help for icon name.

I want to think that the self closing <FontIcon className="material-icons" /> was a typo, it should be without /> since it has a closing </FontIcon> tag.

Upvotes: 3

Related Questions