font-awesome icons for show/hide chevrons in sidenav toggle

static/icons/angle-double-left-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-left" class="svg-inline--fa fa-angle-double-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"></path></svg>

static/icons/angle-double-right-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-right" class="svg-inline--fa fa-angle-double-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>

styles/elements/_icons.scss

@@ -67,6 +67,10 @@
     @include icon-color($color-gray);
   }
 
+  &.icon--blue {
+    @include icon-color($color-blue-darker);
+  }
+
   &.icon--medium {
     @include icon-size(12);
   }

styles/elements/_sidenav.scss

@@ -31,6 +31,10 @@
       @include sidenav__header;
       float: right;
       color: $color-blue-darker;
+
+      .toggle-arrows {
+        vertical-align: middle;
+      }
     }
 
     ul {

templates/navigation/global_sidenav.html

@@ -7,10 +7,12 @@
     <div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
       <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
         <template v-if="props.isVisible">
-          << Hide
+          {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
+          Hide
         </template>
         <template v-else>
-          Show >>
+          Show
+          {{ Icon('angle-double-right-solid', classes="toggle-arrows icon--blue") }}
         </template>
       </a>
       <div v-if="props.isVisible">