From 982cdaa6f99be375ea2dd9f7aa394d2f15a5173e Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Thu, 3 Nov 2016 15:54:04 -0700
Subject: [PATCH] feat(menu): support icons (#1702)

---
 src/demo-app/menu/menu-demo.html     |  3 ++-
 src/demo-app/menu/menu-demo.ts       |  6 ++++++
 src/lib/core/style/_menu-common.scss |  8 ++++++++
 src/lib/menu/README.md               | 28 ++++++++++++++++++++++++++++
 src/lib/menu/_menu-theme.scss        |  4 ++++
 5 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html
index a28d9fd12f59..99809e3ceeba 100644
--- a/src/demo-app/menu/menu-demo.html
+++ b/src/demo-app/menu/menu-demo.html
@@ -39,7 +39,8 @@
     </md-toolbar>
 
     <md-menu x-position="before" #posXMenu="mdMenu" class="before">
-      <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
+      <button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
+        <md-icon>{{ item.icon }}</md-icon>
         {{ item.text }}
       </button>
     </md-menu>
diff --git a/src/demo-app/menu/menu-demo.ts b/src/demo-app/menu/menu-demo.ts
index aafd42606ce5..3d38c16b7db4 100644
--- a/src/demo-app/menu/menu-demo.ts
+++ b/src/demo-app/menu/menu-demo.ts
@@ -16,5 +16,11 @@ export class MenuDemo {
     {text: 'Sign Out'}
   ];
 
+  iconItems = [
+    {text: 'Redial', icon: 'dialpad'},
+    {text: 'Check voicemail', icon: 'voicemail', disabled: true},
+    {text: 'Disable alerts', icon: 'notifications_off'}
+  ];
+
   select(text: string) { this.selected = text; }
 }
diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss
index c010a34e0a65..3c6faabd4be0 100644
--- a/src/lib/core/style/_menu-common.scss
+++ b/src/lib/core/style/_menu-common.scss
@@ -42,4 +42,12 @@ $md-menu-vertical-padding: 8px !default;
   &[disabled] {
     cursor: default;
   }
+
+  md-icon {
+    margin-right: 16px;
+
+    [dir='rtl'] & {
+      margin-left: 16px;
+    }
+  }
 }
diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md
index bc90d5b187fb..b3fe5cef0b6c 100644
--- a/src/lib/menu/README.md
+++ b/src/lib/menu/README.md
@@ -84,6 +84,34 @@ class MyComp {
 </md-menu>
 ```
 
+### Adding an icon
+
+Menus also support displaying `md-icon` elements before the menu item text.
+
+*my-comp.html*
+```html
+<md-menu #menu="mdMenu">
+  <button md-menu-item> 
+    <md-icon> dialpad </md-icon>
+    <span> Redial </span>
+  </button>
+  <button md-menu-item disabled> 
+    <md-icon> voicemail </md-icon>
+    <span> Check voicemail </span>
+  </button>
+  <button md-menu-item> 
+    <md-icon> notifications_off </md-icon>
+    <span> Disable alerts </span>
+  </button>
+</md-menu>
+```
+
+Output:
+
+<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_closed.png">
+<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_open.png">
+
+
 ### Customizing menu position
 
 By default, the menu will display after and below its trigger.  You can change this display position 
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
index 28930e22e900..6390ad343b51 100644
--- a/src/lib/menu/_menu-theme.scss
+++ b/src/lib/menu/_menu-theme.scss
@@ -18,6 +18,10 @@
       color: md-color($foreground, 'disabled');
     }
 
+    md-icon {
+      color: md-color($foreground, 'icon');
+    }
+
     &:hover:not([disabled]), &:focus:not([disabled]) {
       background: md-color($background, 'hover');
     }