CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Maielo
Maielo

Reputation: 732

Material ui <Icon> doesn't render correctly

I am new into react and i am using material-ui to get things done.

The problem i am having is that icon doesnt show up even though per material-ui docs it should work :

per docs

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

...

<Icon className={classes.icon} color="action">
    add_circle
</Icon>

i am trying to get nav items using:

import React from 'react';
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Icon from '@material-ui/core/Icon';
import InboxIcon from '@material-ui/icons/Inbox';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import _ from 'lodash';


const SideMenuItems = ({ menuItems }) => {

    return _.map( menuItems ,( menuItem )=>{

        const { text, link, icon } = menuItem;

        return (
            <NavLink to={link} key={link}>
                <ListItem>
                    <ListItemIcon>
                        <Icon>add_circle</Icon>
                    </ListItemIcon>
                    <ListItemText inset primary={text} />
                </ListItem>
            </NavLink>
        );
    });
};

everything renders fine BUT icon, which renders just text. i have tried it with declaring explicit icon and it worked (e.g <HomeIcon/>) but i need it to be dynamically generated from config object so i can not use that...

Any help or explanation would be appreciated Thanks in advance

Upvotes: 2

Views: 2839

Answers (1)

FK82
FK82

Reputation: 5075

You probably forgot to import the icon font in your index.html file. You need to add the following stylesheet:

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

This is explained in the section Font Icons in the docs. Note that HomeIcon is an SVG icon and renders an svg element rather than using a font.

Upvotes: 2

Related Questions