feat(menu): support icons (#1702)

angular · Nov 3, 2016 · 982cdaa · 982cdaa
1 parent 7e08468
commit 982cdaa
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
     }