reactjs - Common-Js および Material-UI アイコン。アイコンが読み込まれない理由を理解する。(React Js)

Question

次のコードを実行しようとしています。

"use strict";

var React = require('react');
var Router = require('react-router');
var Link = Router.Link;

var Material = require('material-ui');
var ThemeManager = new Material.Styles.ThemeManager();
var Colors = Material.Styles.Colors;
var dropdown = Material.Icons.NavigationArrowDropDown; //This icon cannot be found

var Home = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

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

    componentWillMount: function () {
        ThemeManager.setPalette({
            accent1Color: Colors.cyan500
        });
    },

    render: function () {
        return (
            <div>
                <Material.AppBar title="Test" showMenuIconButton={false}>
                </Material.AppBar>
                <Material.List>
                    <Material.ListItem primaryText={"Queue"} leftIcon={<Material.Icons.NavigationChevronLeft/>} />
                    <Material.ListItem primaryText={"Log"} leftIcon={<Material.Icons.NavigationArrowDropDown/>} />
                    <Material.ListItem primaryText={"Settings"} />
                </Material.List>
                <Material.Paper>
                    <span>This is some text</span>
                    <Material.RaisedButton label="Super Secret Password" primary={true}/>
                </Material.Paper>
            </div>
        );
    }
});

module.exports = Home;

必要なパッケージを含めましたが、含めなくてもコードは正常に動作します

Material.Icons.NavigationArrowDropDown;

material-ui (0.11.1) に移動しましたが、ファイルはエクスポートとして次のパスに存在します。

lib > svg-icons > Navigation > Arrow_drop_down.js ソースコードは次のとおりです。

'use strict';

var React = require('react/addons');
var PureRenderMixin = React.addons.PureRenderMixin;
var SvgIcon = require('../../svg-icon');

var NavigationArrowDropDown = React.createClass({
  displayName: 'NavigationArrowDropDown',

  mixins: [PureRenderMixin],

  render: function render() {
    return React.createElement(
      SvgIcon,
      this.props,
      React.createElement('path', { d: 'M7 10l5 5 5-5z' })
    );
  }

});

module.exports = NavigationArrowDropDown;

ただし、アプリケーションをコンパイルして実行すると、アイテムが見つからず、それが存在しないと不平を言いますが、他のアイテムはまだありません

Material.Icons.NavigationChevronLeft

問題なく見つかります。このファイル (ルーターと app.js を除く) は、私のプロジェクト全体です。

両方のファイルが同じフォルダーに存在するため、一方の参照が見つかり、もう一方の参照が見つからない理由がわかりません。

エラーは実行時に発生し、jsLint はそれを検出しません。さらに、listItem アイコンを削除すると、ページが正しくレンダリングされます。この問題は、このコンポーネントに直接関係しているようです。

追加メモ: var ドロップダウンを削除しました。マテリアル UI からエクスポートが見つからないことを示すためだけにありました。

tl;dr : 別の Icon クラスと同じフォルダー内の Material UI Icon クラスがピックアップされていません。なんで？