Elements are incomplete (eg Icons missing from DatePicker)

[yarnball]

Thanks for this. Helped out!

How do I get the entire element to appear?

Autocomplete does not display the drop down or tag elements.

I used create-react-app.

T the DatePicker has Chevron Icons within it- but they do not appear

This is my package.json:

...
   "toolbox": "react-toolbox-themr"
  },
  "reactToolbox": {
    "include": [
        "BUTTON",
        "DATE_PICKER",
        "FONT_ICON",
        "AUTOCOMPLETE"
    ],
    "customProperties": {
        "animation-duration": "0.3s",
        "color-accent": "var(--palette-pink-a200)",
        "color-accent-dark": "var(--palette-pink-700)",
        "color-primary-contrast": "var(--color-dark-contrast)",
        "color-accent-contrast": "var(--color-dark-contrast)"
    },
    "output": "assets/react-toolbox"
}

import Button from 'react-toolbox/lib/button/Button';
import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';
import FontIcon from 'react-toolbox/lib/font_icon/FontIcon';
import Autocomplete from 'react-toolbox/lib/autocomplete/Autocomplete';

const source = {
  'ES-es': 'Spain',
  'TH-th': 'Thailand',
  'EN-gb': 'England',
  'EN-en': 'USA'
};

class Dashboard extends Component {
  state = {
    countries: ['ES-es', 'TH-th']
  }

  handleChange = (value) => {
    this.setState({countries: value});
  };
  render() {
    return (
        <div><Button label="Be Humble" raised primary />
<DatePicker/>
      <Autocomplete
        direction="down"
        selectedPosition="above"
        label="Choose countries"
        onChange={this.handleChange}
        source={source}
        value={this.state.countries}
      />
        </div>
    );
  }
}

[tarnasky]

@yarnball It looks like you aren't including the Material Design Icons. See the "Roboto Font and Material Design Icons" here:

http://react-toolbox.com/#/install

[cborchert]

Just to be a bit more explicit about the install process if you're using npm or prefer to include styles through js: 1) Install the package: npm install -S material-design-icons 2) In the highest level react component, make sure to include the style: import 'material-design-icons/iconfont/material-icons.css';

Otherwise, you can just include the css in your main html file.

[arefed-zz]

I have the same problem, and I am including the material-icons.css in my highest level css.