diff --git a/docs/src/app/components/pages/components/app-bar.jsx b/docs/src/app/components/pages/components/app-bar.jsx
index eebd2361a1b785..1eacb604f32b3b 100644
--- a/docs/src/app/components/pages/components/app-bar.jsx
+++ b/docs/src/app/components/pages/components/app-bar.jsx
@@ -6,7 +6,9 @@ let FlatButton = require('flat-button');
let ComponentDoc = require('../../component-doc');
let CodeExample = require('../../code-example/code-example');
let Code = require('app-bar-code');
-
+const IconMenu = require('menus/icon-menu');
+const MenuItem = require('menus/menu-item');
+const MoreVertIcon = require('svg-icons/navigation/more-vert');
class AppBarPage extends React.Component {
@@ -120,6 +122,19 @@ class AppBarPage extends React.Component {
title="Title"
iconElementLeft={}
iconElementRight={} />
+
+ }
+ iconElementRight={
+
+ }>
+
+
+
+
+ } />
);
diff --git a/docs/src/app/components/pages/components/icon-menus.jsx b/docs/src/app/components/pages/components/icon-menus.jsx
index 0980497e76d511..e5dc029ebbaac4 100644
--- a/docs/src/app/components/pages/components/icon-menus.jsx
+++ b/docs/src/app/components/pages/components/icon-menus.jsx
@@ -56,6 +56,12 @@ class IconMenus extends React.Component {
header: 'default: false',
desc: 'Indicates if the menu should render with compact desktop styles.'
},
+ {
+ name: 'iconStyle',
+ type: 'object',
+ header: 'optional',
+ desc: 'The style object to use to override underlying icon style.'
+ },
{
name: 'iconButtonElement',
type: 'element: IconButton',
diff --git a/docs/src/app/components/raw-code/app-bar-code.txt b/docs/src/app/components/raw-code/app-bar-code.txt
index 6697c0f4f4b7dc..477eae19f02610 100644
--- a/docs/src/app/components/raw-code/app-bar-code.txt
+++ b/docs/src/app/components/raw-code/app-bar-code.txt
@@ -5,4 +5,17 @@
}
- iconElementRight={} />;
+ iconElementRight={} />
+
+}
+ iconElementRight={
+
+ }>
+
+
+
+
+} />
diff --git a/src/app-bar.jsx b/src/app-bar.jsx
index b39f0d44203548..115564d00563ec 100644
--- a/src/app-bar.jsx
+++ b/src/app-bar.jsx
@@ -187,6 +187,7 @@ const AppBar = React.createClass({
let iconElementRight = props.iconElementRight;
switch (iconElementRight.type.displayName) {
+ case 'IconMenu':
case 'IconButton':
iconElementRight = React.cloneElement(iconElementRight, {
iconStyle: this.mergeAndPrefix(styles.iconButton.iconStyle),
diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx
index 2b02d4f1ed3dad..dfd251d4f181f5 100644
--- a/src/menus/icon-menu.jsx
+++ b/src/menus/icon-menu.jsx
@@ -19,6 +19,7 @@ const IconMenu = React.createClass({
propTypes: {
closeOnItemTouchTap: React.PropTypes.bool,
iconButtonElement: React.PropTypes.element.isRequired,
+ iconStyle: React.PropTypes.object,
openDirection: PropTypes.corners,
onItemTouchTap: React.PropTypes.func,
onKeyboardFocus: React.PropTypes.func,
@@ -85,6 +86,7 @@ const IconMenu = React.createClass({
let {
closeOnItemTouchTap,
iconButtonElement,
+ iconStyle,
openDirection,
onItemTouchTap,
onKeyboardFocus,
@@ -121,6 +123,7 @@ const IconMenu = React.createClass({
let iconButton = React.cloneElement(iconButtonElement, {
onKeyboardFocus: this.props.onKeyboardFocus,
+ iconStyle: this.mergeStyles(iconStyle, iconButtonElement.props.iconStyle),
onTouchTap: (e) => {
this.open(Events.isKeyboard(e));
if (iconButtonElement.props.onTouchTap) iconButtonElement.props.onTouchTap(e);