From 34f2704c8a004c98ecece39313249ed5e2caa72a Mon Sep 17 00:00:00 2001
From: Elad Bezalel <elad.bezalel@gmail.com>
Date: Fri, 4 Mar 2016 01:41:11 +0200
Subject: [PATCH] fix(menu): text alignment in md-button with icon and href

- only `a` element had `display: flex;` but when `ng-click` was present an `a` element is not available therefore there's no flex container, moving the `display: flex;` to the button solves it

fixes #7367

Closes #7401
---
 src/components/menu/demoMenuPositionModes/index.html | 2 +-
 src/components/menu/menu.scss                        | 9 ++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/menu/demoMenuPositionModes/index.html b/src/components/menu/demoMenuPositionModes/index.html
index d293547f07b..67f359b256c 100644
--- a/src/components/menu/demoMenuPositionModes/index.html
+++ b/src/components/menu/demoMenuPositionModes/index.html
@@ -45,7 +45,7 @@ <h3 class="md-subhead">Target-Based Position Modes</h3>
           <md-menu-content width="4" >
             <md-menu-item ng-repeat="item in [1, 2, 3]">
               <md-button ng-click="ctrl.announceClick($index)">
-                  <div layout="row">
+                  <div layout="row" flex>
                     <p flex>Option {{item}}</p>
                     <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
                   </div>
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index 5efdf15d8a3..4f9064d1eec 100644
--- a/src/components/menu/menu.scss
+++ b/src/components/menu/menu.scss
@@ -81,22 +81,17 @@ md-menu-item {
     padding-right: 2*$baseline-grid;
   }
 
-  > a.md-button {
-    display: flex;
-  }
-
   > .md-button {
     border-radius: 0;
     margin: auto 0;
     font-size: (2*$baseline-grid) - 1;
     text-transform: none;
     font-weight: 400;
-    text-align: left;
-    text-align: start;
     height: 100%;
     padding-left: 2*$baseline-grid;
     padding-right: 2*$baseline-grid;
-    display: inline-block;
+    @include rtl(text-align, left, right);
+    display: flex;
     align-items: baseline;
     align-content: flex-start;
     width:100%;