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

Author: EladBezalel

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>

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%;