DropDownIcon Feedback

Question

DropDownIcon Feedback

I'm trying to create an AppBar with DropDownIcon, but it doesn't appear in the AppBar, but when I inspect the page with the inspector, I found all the dropdown fields, so I don't know why it doesn't appear. This is my js file:

var React = require('react');
var mui = require('material-ui');
var ThemeManager = new mui.Styles.ThemeManager();
var Colors = mui.Styles.Colors;
var AppBar = mui.AppBar;
var SvgIcon = mui.SvgIcon;
var DropDownIcon = mui.DropDownIcon;

var Main = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },

  componentWillMount() {
    ThemeManager.setPalette({
        primary1Color: Colors.teal500
    });
  },

  render() {

    var containerStyle = {
      display:'table-header-group'
    };
      
    var innercontainerStyle = {
        display: 'table-cell',
        verticalAlign: 'middle',
        textAlign: 'center'
    };
      
    var containerWrapperStyle = {
        height: '100%',
        display: 'table',
        width: '100%'
    };

    var urlIcon = '<img src="img/plus.svg"/>';

    return (
      <div style={containerWrapperStyle}>
        <div style={containerStyle}>
            <AppBar title='Title' iconElementRight={<DDIcon />}/>
        </div>
        <div style={innercontainerStyle}>
            <div>
                <img src="img/plus.svg"/>
                <br/>
                <p>Add City</p>
            </div>
        </div>
      </div>
    );
  }

});

var ActionOption = React.createClass({
  render: function() {
      var stile = {
          margin: '12px 12px 0 0',
          padding: '0 0 0 8px'
      };
      
    return (
      <SvgIcon {...this.props} style={stile}>
        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
      </SvgIcon>
    );
  }
});

var DDIcon = React.createClass({
    render: function() {
        var menuItems = [
           { payload: '1', text: 'Never' },
           { payload: '2', text: 'Every Night' },
           { payload: '3', text: 'Weeknights' },
           { payload: '4', text: 'Weekends' },
           { payload: '5', text: 'Weekly' },
        ];      
    
    return (
        <DropDownIcon icon={<ActionOption/>} menuItems={menuItems}/>
    );
    }
});



React.render(<Main />, document.body);