Material-ui: Icon not showing up

Created on 15 Dec 2015  路  15Comments  路  Source: mui-org/material-ui

I am using the example project, I added an AppBar to main.jsx:

    render() {
        return (
            <div style={containerStyle}>
                <AppBar
                    iconElementRight={ <IconButton iconClassName="muidocs-icon-custom-github" tooltip="GitHub"/> }
                    title="PR-Stat"
                />
                <Dialog
                    actions={standardActions}
                    onRequestClose={this._handleRequestClose}
                    open={this.state.open}
                    title="Super Secret Password"
                >
                    1-2-3-4-5
                </Dialog>
                <h1>material-ui</h1>
                <h2>example project</h2>
                <RaisedButton label="Super Secret Password"
                    primary={true} onTouchTap={this._handleTouchTap} />
            </div>
        );
    },

the muidocs-icon-custom-github icon does not show the github icon. An IconButton with such a class name is described in the docs

bug 馃悰 docs
Source
picture leshow

Most helpful comment

I really can't say why this ticket was closed. For newcomers this is very confusing.

The solution proposed here, please correct me if wrong, is to copy the whole CSS code found in this link (coming from the docs source code). While this works, it can't really be the solution.

The solution should be to use the Font Icon component like this (this is for Material Icons):

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';

const Header = () => (
    <AppBar
        title="Title"
        iconElementRight={<IconButton>
            <FontIcon className="material-icons">settings</FontIcon>
        </IconButton>}
    />
);

export default Header;

You will still need to import the Material Icons font in index.html:

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

Can someone please confirm?

picture ksiabani on 16 Oct 2017
👍17 🎉2

All 15 comments

You are right, the className is from the doc source code: https://github.com/callemall/material-ui/blob/master/docs/src/www/css/font-icons/style.css#L59.

@subjectix We should address this during the migration of the doc to make the examples more standalone.

oliviertassinari picture oliviertassinari on 15 Dec 2015

@oliviertassinari Yes definitely! :+1:

alitaheri picture alitaheri on 15 Dec 2015

so... how do I get the icon to show up?

leshow picture leshow on 15 Dec 2015

@leshow For the FontIcon component, you need to have

.muidocs-icon-custom-github:before {
    content: "\e625";
}

and to import the font

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
oliviertassinari picture oliviertassinari on 16 Dec 2015
👎3 👍2

I added that to my main.css and index.html (i'm using the gulp/react example app) and the icon was replaced with the rectangle with an 'X' in it, the icon missing icon. So that still didn't do it. Where are you getting the content CSS from?

leshow picture leshow on 18 Dec 2015

Ah, nevermind. I was missing some more CSS from that file

leshow picture leshow on 18 Dec 2015

heeey, this seems to have happened a while back, but I'm having the same issue... The github icon DOES NOT show up :( even after having added that bit of .css into my