Fix IE 11 primary navigation icon positioning

Added height value of 100% to nav-icon in order to properly align
in IE11.

Tested on Chrome, Firefox, Safari, Edge and IE11.

Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I66b2d4de1b67f546e0709eab70a780a297efbb7a

2 files changed, 8 insertions, 9 deletions

diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 6205a18..435980a 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -2,13 +2,13 @@
   <ul id="nav__top-level" ng-style="navStyle">
     <li>
       <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
-        <icon class="nav-icon" file="icon-overview.svg"></icon>
+        <icon class="nav-icon" file="icon-overview.svg" aria-hidden="true"></icon>
         Server overview
       </a>
     </li>
     <li>
       <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')">
-        <icon class="nav-icon" file="icon-health.svg"></icon>
+        <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
         Server health
       </button>
       <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
@@ -28,7 +28,7 @@
     </li>
     <li>
       <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
-        <icon class="nav-icon  nav-icon__control" file="icon-control.svg"></icon>
+        <icon class="nav-icon  nav-icon__control" file="icon-control.svg" aria-hidden="true"></icon>
         Server control
       </button>
       <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
@@ -58,7 +58,7 @@
     </li>
     <li>
       <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
-        <icon class="nav-icon" file="icon-config.svg"></icon>
+        <icon class="nav-icon" file="icon-config.svg" aria-hidden="true"></icon>
         Server configuration
       </button>
       <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
@@ -78,10 +78,8 @@
     </li>
     <li>
       <button class="btn-access-control" ng-class="{opened: firstLevel == 'access-control'}" ng-click="change('access-control')">
-        <span>
-          <icon class="nav-icon" file="icon-key.svg"></icon>
+          <icon class="nav-icon nav-icon__key" file="icon-key.svg" aria-hidden="true"></icon>
           Access control
-        </span>
       </button>
       <ul class="nav__second-level btn-access-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'access-control')}">
         <li ng-class="{'active': (path == '/access-control' || path == '/access-control/ldap')}">
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index d7e8909..f8f5a6f 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -56,13 +56,14 @@ $nav__second-level-text-color: $base-02--01;
   .nav-icon {
     @include navIcons;
     width: 100%;
+    height: 100%;
     svg {
       width: 36px;
       height: auto;
     }
   }
-  .nav-icon__control {
-    margin-bottom: 1em;
+  .nav-icon__control,
+  .nav-icon__key {
     svg {
       width: 30px;
     }