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

3 files changed, 9 insertions, 10 deletions

diff --git a/app/assets/icons/icon-key.svg b/app/assets/icons/icon-key.svg
index 44a811c..d366d24 100644
--- a/app/assets/icons/icon-key.svg
+++ b/app/assets/icons/icon-key.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
     <path id="a" d="M19.9 7.056a2.144 2.144 0 0 0 1.515 3.658 2.141 2.141 0 0 0 1.514-3.658 2.143 2.143 0 0 0-3.028 0zM20.345 0a9.633 9.633 0 0 0-7.74 3.898 9.646 9.646 0 0 0-1.481 8.543L0 23.571V30h6.424l11.124-11.13a9.642 9.642 0 0 0 8.216-1.251 9.655 9.655 0 0 0 4.196-7.179 9.426 9.426 0 0 0-1.746-6.393A9.706 9.706 0 0 0 20.344 0zm0 17.143c-.737 0-1.47-.11-2.176-.324l-1.227-.373-.908.908-3.406 3.408-1.476-1.476L9.637 20.8l1.476 1.477-1.698 1.7L7.939 22.5l-1.515 1.515 1.477 1.477-2.364 2.365H2.141V24.46l10.496-10.502.907-.908-.307-1.016a7.643 7.643 0 0 1 3.642-9.046 7.509 7.509 0 0 1 7.253.184 7.519 7.519 0 0 1 3.716 6.235 7.199 7.199 0 0 1-1.17 4.282 7.565 7.565 0 0 1-6.334 3.455z"/>
 </svg>
\ No newline at end of file
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;
     }