From 3c752cba630cf5366d6d447c7c01717169dc24c1 Mon Sep 17 00:00:00 2001
From: Hai Nguyen <hai@call-em-all.com>
Date: Tue, 20 Jan 2015 00:22:10 -0600
Subject: [PATCH] Removed icon dependency from dropdown menu

---
 src/js/drop-down-menu.jsx               | 16 ++++++++--------
 src/js/svg-icons/drop-down-arrow.jsx    | 16 ++++++++++++++++
 src/js/svg-icons/svg-icon.jsx           | 23 +++++++++++++++++++++++
 src/less/components/components.less     |  1 +
 src/less/components/drop-down-menu.less |  7 ++++---
 src/less/components/svg-icon.less       | 11 +++++++++++
 6 files changed, 63 insertions(+), 11 deletions(-)
 create mode 100644 src/js/svg-icons/drop-down-arrow.jsx
 create mode 100644 src/js/svg-icons/svg-icon.jsx
 create mode 100644 src/less/components/svg-icon.less

diff --git a/src/js/drop-down-menu.jsx b/src/js/drop-down-menu.jsx
index 8f7c2d6d71438b..0454411eebf007 100644
--- a/src/js/drop-down-menu.jsx
+++ b/src/js/drop-down-menu.jsx
@@ -1,10 +1,10 @@
-var React = require('react'),
-  Classable = require('./mixins/classable.js'),
-  ClickAwayable = require('./mixins/click-awayable'),
-  KeyLine = require('./utils/key-line.js'),
-  Paper = require('./paper.jsx'),
-  Icon = require('./icon.jsx'),
-  Menu = require('./menu.jsx');
+var React = require('react');
+var Classable = require('./mixins/classable.js');
+var ClickAwayable = require('./mixins/click-awayable');
+var DropDownArrow = require('./svg-icons/drop-down-arrow.jsx');
+var KeyLine = require('./utils/key-line.js');
+var Paper = require('./paper.jsx');
+var Menu = require('./menu.jsx');
 
 var DropDownMenu = React.createClass({
 
@@ -55,7 +55,7 @@ var DropDownMenu = React.createClass({
           <div className="mui-menu-label">
             {this.props.menuItems[this.state.selectedIndex].text}
           </div>
-          <Icon className="mui-menu-drop-down-icon" icon="navigation-arrow-drop-down" />
+          <DropDownArrow className="mui-menu-drop-down-icon" />
           <div className="mui-menu-control-underline" />
         </div>
         <Menu
diff --git a/src/js/svg-icons/drop-down-arrow.jsx b/src/js/svg-icons/drop-down-arrow.jsx
new file mode 100644
index 00000000000000..d369c8e5df4efc
--- /dev/null
+++ b/src/js/svg-icons/drop-down-arrow.jsx
@@ -0,0 +1,16 @@
+var React = require('react');
+var SvgIcon = require('./svg-icon.jsx');
+
+var DropDownArrow = React.createClass({
+
+  render: function() {
+    return (
+      <SvgIcon {...this.props}>
+        <polygon points="7,9.5 12,14.5 17,9.5 "/>
+      </SvgIcon>
+    );
+  }
+
+});
+
+module.exports = DropDownArrow;
\ No newline at end of file
diff --git a/src/js/svg-icons/svg-icon.jsx b/src/js/svg-icons/svg-icon.jsx
new file mode 100644
index 00000000000000..937c7f8e47eb11
--- /dev/null
+++ b/src/js/svg-icons/svg-icon.jsx
@@ -0,0 +1,23 @@
+var React = require('react');
+var Classable = require('../mixins/classable.js');
+
+var SvgIcon = React.createClass({
+
+  mixins: [Classable],
+
+  render: function() {
+    var classes = this.getClasses('mui-svg-icon');
+
+    return (
+      <svg
+        {...this.props}
+        className={classes}
+        viewBox="0 0 24 24">
+        {this.props.children}
+      </svg>
+    );
+  }
+
+});
+
+module.exports = SvgIcon;
\ No newline at end of file
diff --git a/src/less/components/components.less b/src/less/components/components.less
index a0d22ec6c46b7f..45bc59d0fac6d4 100644
--- a/src/less/components/components.less
+++ b/src/less/components/components.less
@@ -25,6 +25,7 @@
 @import "slider.less";
 @import "snackbar.less";
 @import "subheader.less";
+@import "svg-icon.less";
 @import "table.less";
 @import "tabs.less";
 @import "toggle.less";
diff --git a/src/less/components/drop-down-menu.less b/src/less/components/drop-down-menu.less
index bcc3d4fc60135e..2fe1859c0be947 100644
--- a/src/less/components/drop-down-menu.less
+++ b/src/less/components/drop-down-menu.less
@@ -51,11 +51,12 @@
     }
 
     .mui-menu-drop-down-icon {
-      line-height: @desktop-toolbar-height;
       position: absolute;
-      top: 0;
+      top: ((@desktop-toolbar-height - 24px) / 2);
       right: @desktop-gutter-less;
-      color: @drop-down-menu-icon-color;
+      * {
+        fill: @drop-down-menu-icon-color;
+      }
     }
 
     .mui-menu-control-underline {
diff --git a/src/less/components/svg-icon.less b/src/less/components/svg-icon.less
new file mode 100644
index 00000000000000..2d95fa13c5a0ef
--- /dev/null
+++ b/src/less/components/svg-icon.less
@@ -0,0 +1,11 @@
+.mui-svg-icon {
+  position: relative;
+  height: @icon-size;
+  width: @icon-size;
+  display: inline-block;
+  user-select: none;
+
+  * {
+    fill: @body-text-color;
+  }
+}
\ No newline at end of file