From da9422fbc3f8c59c53f51cdc7dcc1be886fcce9f Mon Sep 17 00:00:00 2001
From: Johannes Werner <johannes.werner86@gmail.com>
Date: Sat, 14 Jul 2018 16:42:49 +0200
Subject: [PATCH] feat: replace font-awesome with SVG's (#180)

closes #177
---
 .storybook/preview-head.html                  |  6 ++
 src/app/app/App/App.vue                       | 33 ++++++---
 src/app/components/Components/Components.vue  |  6 +-
 src/app/home/DevEx/DevEx.vue                  | 22 +++---
 .../home/EnterpriseReady/EnterpriseReady.vue  | 25 ++++---
 src/app/home/Stage/Stage.vue                  | 10 ++-
 .../home/UserExperience/UserExperience.vue    | 25 ++++---
 .../VueAutocomplete/VueAutocomplete.vue       |  4 +-
 .../components/VueButton/VueButton.spec.ts    | 11 ---
 .../components/VueButton/VueButton.stories.ts | 16 -----
 .../shared/components/VueButton/VueButton.vue |  9 ---
 .../VueCookieConsent/VueCookieConsent.vue     | 26 ++++---
 .../VueDataTableHeader.spec.ts                | 13 ++--
 .../VueDataTableHeader/VueDataTableHeader.vue | 21 +++---
 .../shared/components/VueFooter/VueFooter.vue | 25 ++++---
 .../shared/components/VueSelect/VueSelect.vue |  2 +
 .../VueTabGroup/VueTabGroup.stories.ts        |  6 +-
 .../components/VueTabGroup/VueTabGroup.vue    | 32 +++------
 .../VueTabGroup/VueTabItem/VueTabItem.spec.ts |  1 -
 .../VueTabGroup/VueTabItem/VueTabItem.vue     |  4 --
 .../icons/VueIconBook/VueIconBook.vue         | 14 ++++
 .../icons/VueIconBullhorn/VueIconBullhorn.vue | 16 +++++
 .../VueIconCertificate/VueIconCertificate.vue | 16 +++++
 .../VueIconChartLine/VueIconChartLine.vue     | 16 +++++
 .../icons/VueIconCode/VueIconCode.vue         | 16 +++++
 .../icons/VueIconFlag/VueIconFlag.vue         | 16 +++++
 .../icons/VueIconGithub/VueIconGithub.vue     | 16 +++++
 .../VueIconGithubAlt/VueIconGithubAlt.vue     | 16 +++++
 .../icons/VueIconHashtag/VueIconHashtag.vue   | 16 +++++
 .../icons/VueIconMobile/VueIconMobile.vue     | 16 +++++
 .../VueIconPuzzlePiece/VueIconPuzzlePiece.vue | 16 +++++
 .../icons/VueIconSearch/VueIconSearch.vue     | 16 +++++
 .../icons/VueIconSort/VueIconSort.vue         | 16 +++++
 .../icons/VueIconSortDown/VueIconSortDown.vue | 16 +++++
 .../icons/VueIconSortUp/VueIconSortUp.vue     | 16 +++++
 .../icons/VueIconSpinner/VueIconSpinner.vue   | 16 +++++
 .../icons/VueIconTimes/VueIconTimes.vue       | 16 +++++
 .../VueIconTwitterSquare.vue                  | 16 +++++
 .../shared/components/icons/icons.stories.ts  | 70 +++++++++++++++++++
 src/app/shared/styles/_variables.scss         | 16 ++---
 src/app/shared/styles/global.scss             | 24 +++++++
 src/index.template.html                       | 11 +--
 42 files changed, 542 insertions(+), 162 deletions(-)
 create mode 100644 src/app/shared/components/icons/VueIconBook/VueIconBook.vue
 create mode 100644 src/app/shared/components/icons/VueIconBullhorn/VueIconBullhorn.vue
 create mode 100644 src/app/shared/components/icons/VueIconCertificate/VueIconCertificate.vue
 create mode 100644 src/app/shared/components/icons/VueIconChartLine/VueIconChartLine.vue
 create mode 100644 src/app/shared/components/icons/VueIconCode/VueIconCode.vue
 create mode 100644 src/app/shared/components/icons/VueIconFlag/VueIconFlag.vue
 create mode 100644 src/app/shared/components/icons/VueIconGithub/VueIconGithub.vue
 create mode 100644 src/app/shared/components/icons/VueIconGithubAlt/VueIconGithubAlt.vue
 create mode 100644 src/app/shared/components/icons/VueIconHashtag/VueIconHashtag.vue
 create mode 100644 src/app/shared/components/icons/VueIconMobile/VueIconMobile.vue
 create mode 100644 src/app/shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece.vue
 create mode 100644 src/app/shared/components/icons/VueIconSearch/VueIconSearch.vue
 create mode 100644 src/app/shared/components/icons/VueIconSort/VueIconSort.vue
 create mode 100644 src/app/shared/components/icons/VueIconSortDown/VueIconSortDown.vue
 create mode 100644 src/app/shared/components/icons/VueIconSortUp/VueIconSortUp.vue
 create mode 100644 src/app/shared/components/icons/VueIconSpinner/VueIconSpinner.vue
 create mode 100644 src/app/shared/components/icons/VueIconTimes/VueIconTimes.vue
 create mode 100644 src/app/shared/components/icons/VueIconTwitterSquare/VueIconTwitterSquare.vue
 create mode 100644 src/app/shared/components/icons/icons.stories.ts

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 252060bd..b2362d85 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -28,5 +28,11 @@
   th {
     color: #000 !important;
   }
+
+  i svg {
+    height: 32px;
+    width:  32px;
+    fill:   #FFF;
+  }
 </style>
 <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" type="text/css">
diff --git a/src/app/app/App/App.vue b/src/app/app/App/App.vue
index 57ef21ad..093e32ec 100644
--- a/src/app/app/App/App.vue
+++ b/src/app/app/App/App.vue
@@ -6,43 +6,43 @@
       <ul :class="$style.nav">
         <li>
           <a href="/docs" @click.native="navBarClose">
-            <i class="fas fa-book" />
+            <vue-icon-book />
             <small>{{ $t('App.nav.docs' /* Documentation */) }}</small>
           </a>
         </li>
         <li>
           <router-link to="/counter" @click.native="navBarClose">
-            <i class="fas fa-hashtag" />
+            <vue-icon-hashtag />
             <small>{{ $t('App.nav.counter' /* Counter */) }}</small>
           </router-link>
         </li>
         <li>
           <router-link to="/components" @click.native="navBarClose">
-            <i class="fas fa-puzzle-piece" />
+            <vue-icon-puzzle-piece />
             <small>{{ $t('App.nav.components' /* Components */) }}</small>
           </router-link>
         </li>
         <li>
           <a @click="localeSwitch('en')">
-            <i class="fas fa-flag" />
+            <vue-icon-flag />
             <small>English</small>
           </a>
         </li>
         <li>
           <a @click="localeSwitch('de')">
-            <i class="fas fa-flag" />
+            <vue-icon-flag />
             <small>Deutsch</small>
           </a>
         </li>
         <li>
           <a @click="localeSwitch('pt')">
-            <i class="fas fa-flag" />
+            <vue-icon-flag />
             <small>Português</small>
           </a>
         </li>
         <li>
           <a @click="localeSwitch('zh-cn')">
-            <i class="fas fa-flag" />
+            <vue-icon-flag />
             <small>中文</small>
           </a>
         </li>
@@ -73,9 +73,17 @@
   import VueCookieConsent           from '../../shared/components/VueCookieConsent/VueCookieConsent';
   import { loadLocaleAsync }        from '../../shared/plugins/i18n/i18n';
   import { EventBus }               from '../../shared/services/EventBus';
+  import VueIconBook                from '../../shared/components/icons/VueIconBook/VueIconBook';
+  import VueIconHashtag             from '../../shared/components/icons/VueIconHashtag/VueIconHashtag';
+  import VueIconPuzzlePiece         from '../../shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece';
+  import VueIconFlag                from '../../shared/components/icons/VueIconFlag/VueIconFlag';
 
   export default {
     components: {
+      VueIconFlag,
+      VueIconPuzzlePiece,
+      VueIconHashtag,
+      VueIconBook,
       VueCookieConsent,
       VueNavBar,
       VueGrid,
@@ -138,22 +146,29 @@
       cursor:     pointer;
 
       a {
-        padding:         $space-unit;
+        padding:         $space-unit * 2;
         display:         block;
         color:           $text-color;
         text-align:      center;
-        font-size:       32px;
         text-decoration: none;
 
         small {
           font-size: 12px;
           display:   block;
         }
+
+        i {
+          height: 32px;
+          width:  32px;
+        }
       }
     }
 
     @include media(tabletLandscape) {
+      margin: 0;
+
       li {
+        margin:     $space-unit;
         opacity:    .8;
         transition: opacity 250ms linear;
 
diff --git a/src/app/components/Components/Components.vue b/src/app/components/Components/Components.vue
index 6ac3312b..4402c792 100644
--- a/src/app/components/Components/Components.vue
+++ b/src/app/components/Components/Components.vue
@@ -215,7 +215,7 @@
         <vue-grid-item class="vueGridItem">
           <h2>Tabs</h2>
           <vue-tab-group>
-            <vue-tab-item title="Profile" icon="fas fa-user">
+            <vue-tab-item title="Profile">
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
               labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
               et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -223,13 +223,13 @@
               labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
               et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
             </vue-tab-item>
-            <vue-tab-item title="Settings" icon="fas fa-cog">
+            <vue-tab-item title="Settings">
               et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
               labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
               et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
             </vue-tab-item>
-            <vue-tab-item title="Upload" icon="fas fa-upload">
+            <vue-tab-item title="Upload">
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
               labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
               et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/src/app/home/DevEx/DevEx.vue b/src/app/home/DevEx/DevEx.vue
index 82c2da56..03fdf1cd 100644
--- a/src/app/home/DevEx/DevEx.vue
+++ b/src/app/home/DevEx/DevEx.vue
@@ -10,7 +10,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-code" />
+              <vue-icon-code />
               <h3>Quick scaffolding</h3>
               <p>Create components, connected components, modules - and their tests - right from the CLI!</p>
             </vue-panel-body>
@@ -20,7 +20,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-bullhorn" />
+              <vue-icon-bullhorn />
               <h3>Instant feedback</h3>
               <p>Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes
                  to
@@ -37,14 +37,18 @@
 </template>
 
 <script lang="ts">
-  import VueGrid      from '../../shared/components/VueGrid/VueGrid';
-  import VueGridItem  from '../../shared/components/VueGridItem/VueGridItem';
-  import VueGridRow   from '../../shared/components/VueGridRow/VueGridRow';
-  import VuePanel     from '../../shared/components/VuePanel/VuePanel';
-  import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
+  import VueGrid         from '../../shared/components/VueGrid/VueGrid';
+  import VueGridItem     from '../../shared/components/VueGridItem/VueGridItem';
+  import VueGridRow      from '../../shared/components/VueGridRow/VueGridRow';
+  import VuePanel        from '../../shared/components/VuePanel/VuePanel';
+  import VuePanelBody    from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
+  import VueIconCode     from '../../shared/components/icons/VueIconCode/VueIconCode';
+  import VueIconBullhorn from '../../shared/components/icons/VueIconBullhorn/VueIconBullhorn';
 
   export default {
     components: {
+      VueIconBullhorn,
+      VueIconCode,
       VueGrid,
       VueGridItem,
       VuePanel,
@@ -62,8 +66,8 @@
     text-align: center;
 
     i {
-      display:    inline-block;
-      font-size:  $font-size-h1;
+      height:  $font-size-h1;
+      width:  $font-size-h1;
       margin-top: $space-unit;
     }
 
diff --git a/src/app/home/EnterpriseReady/EnterpriseReady.vue b/src/app/home/EnterpriseReady/EnterpriseReady.vue
index 85a505f0..d0d041a6 100644
--- a/src/app/home/EnterpriseReady/EnterpriseReady.vue
+++ b/src/app/home/EnterpriseReady/EnterpriseReady.vue
@@ -8,7 +8,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-chart-line" />
+              <vue-icon-chart-line />
               <h3>SEO</h3>
               <p>We support SEO (document head tags management) and server-side-rendering for search engines that
                  support
@@ -20,7 +20,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-certificate" />
+              <vue-icon-certificate />
               <h3>Best practices</h3>
               <p>A Common style guide, TypeScript, and the best test setup: Automatically guarantee code quality and
                  non-breaking changes.</p>
@@ -31,7 +31,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-flag" />
+              <vue-icon-flag />
               <h3>i18n</h3>
               <p>Scalable apps need to support multiple languages, easily add and support multiple languages with
                  vue-i18n.</p>
@@ -44,14 +44,20 @@
 </template>
 
 <script lang="ts">
-  import VueGrid      from '../../shared/components/VueGrid/VueGrid';
-  import VueGridItem  from '../../shared/components/VueGridItem/VueGridItem';
-  import VuePanel     from '../../shared/components/VuePanel/VuePanel';
-  import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
-  import VueGridRow   from '../../shared/components/VueGridRow/VueGridRow';
+  import VueGrid            from '../../shared/components/VueGrid/VueGrid';
+  import VueGridItem        from '../../shared/components/VueGridItem/VueGridItem';
+  import VuePanel           from '../../shared/components/VuePanel/VuePanel';
+  import VuePanelBody       from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
+  import VueGridRow         from '../../shared/components/VueGridRow/VueGridRow';
+  import VueIconChartLine   from '../../shared/components/icons/VueIconChartLine/VueIconChartLine';
+  import VueIconCertificate from '../../shared/components/icons/VueIconCertificate/VueIconCertificate';
+  import VueIconFlag        from '../../shared/components/icons/VueIconFlag/VueIconFlag';
 
   export default {
     components: {
+      VueIconFlag,
+      VueIconCertificate,
+      VueIconChartLine,
       VueGrid,
       VueGridItem,
       VuePanel,
@@ -70,7 +76,8 @@
 
     i {
       display:    inline-block;
-      font-size:  $font-size-h1;
+      height:     $font-size-h1;
+      width:      $font-size-h1;
       margin-top: $space-unit;
     }
 
diff --git a/src/app/home/Stage/Stage.vue b/src/app/home/Stage/Stage.vue
index 83f8c721..e7b78a16 100644
--- a/src/app/home/Stage/Stage.vue
+++ b/src/app/home/Stage/Stage.vue
@@ -17,7 +17,7 @@
 
           <a :class="$style.github" href="https://github.com/devCrossNet/vue-starter" target="_blank" rel="noopener"
              aria-label="github repository">
-            <i class="fab fa-github"></i>
+            <vue-icon-github />
           </a>
         </vue-grid-item>
       </vue-grid-row>
@@ -30,9 +30,10 @@
   import VueGrid             from '../../shared/components/VueGrid/VueGrid';
   import VueGridRow          from '../../shared/components/VueGridRow/VueGridRow';
   import VueGridItem         from '../../shared/components/VueGridItem/VueGridItem';
+  import VueIconGithub       from '../../shared/components/icons/VueIconGithub/VueIconGithub';
 
   export default {
-    components: { VueGridItem, VueGridRow, VueGrid },
+    components: { VueIconGithub, VueGridItem, VueGridRow, VueGrid },
     props:      {
       disableParticles: {
         type:     Boolean,
@@ -190,5 +191,10 @@
     @include media(tabletLandscape) {
       top: $space-unit * 42;
     }
+
+    i {
+      height: $font-size-h1;
+      width:  $font-size-h1;
+    }
   }
 </style>
diff --git a/src/app/home/UserExperience/UserExperience.vue b/src/app/home/UserExperience/UserExperience.vue
index 818e6959..77f96189 100644
--- a/src/app/home/UserExperience/UserExperience.vue
+++ b/src/app/home/UserExperience/UserExperience.vue
@@ -9,7 +9,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-spinner" />
+              <vue-icon-spinner />
               <h3>Animations</h3>
               <p>A stable animations set up already included (<a href="http://animejs.com/" target="_blank"
                                                                  rel="noopener">anime.js</a>).</p>
@@ -20,7 +20,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-mobile" />
+              <vue-icon-mobile />
               <h3>Progressive-Web-App</h3>
               <p>Offline-first support with service-workers and a lighthouse score as high as possible (90+).</p>
             </vue-panel-body>
@@ -30,7 +30,7 @@
         <vue-grid-item class="vueGridItem">
           <vue-panel class="vuePanel">
             <vue-panel-body>
-              <i class="fas fa-puzzle-piece" />
+              <vue-icon-puzzle-piece />
               <h3>Components</h3>
               <p>
                 A flexible component library that'll be extended over time.
@@ -49,14 +49,20 @@
 </template>
 
 <script lang="ts">
-  import VueGrid      from '../../shared/components/VueGrid/VueGrid';
-  import VueGridItem  from '../../shared/components/VueGridItem/VueGridItem';
-  import VuePanel     from '../../shared/components/VuePanel/VuePanel';
-  import VuePanelBody from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
-  import VueGridRow   from '../../shared/components/VueGridRow/VueGridRow';
+  import VueGrid            from '../../shared/components/VueGrid/VueGrid';
+  import VueGridItem        from '../../shared/components/VueGridItem/VueGridItem';
+  import VuePanel           from '../../shared/components/VuePanel/VuePanel';
+  import VuePanelBody       from '../../shared/components/VuePanel/VuePanelBody/VuePanelBody';
+  import VueGridRow         from '../../shared/components/VueGridRow/VueGridRow';
+  import VueIconSpinner     from '../../shared/components/icons/VueIconSpinner/VueIconSpinner';
+  import VueIconMobile      from '../../shared/components/icons/VueIconMobile/VueIconMobile';
+  import VueIconPuzzlePiece from '../../shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece';
 
   export default {
     components: {
+      VueIconPuzzlePiece,
+      VueIconMobile,
+      VueIconSpinner,
       VueGrid,
       VueGridItem,
       VuePanel,
@@ -75,7 +81,8 @@
 
     i {
       display:    inline-block;
-      font-size:  $font-size-h1;
+      height:     $font-size-h1;
+      width:      $font-size-h1;
       margin-top: $space-unit;
     }
 
diff --git a/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue b/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue
index 6c13373c..7ee833ad 100644
--- a/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue
+++ b/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue
@@ -24,7 +24,7 @@
       @focus="onFocus"
     />
 
-    <i class="fas fa-search" v-show="isLoading === false" />
+    <vue-icon-search v-show="isLoading === false" />
     <vue-loader :class="$style.loader" accent v-show="isLoading === true" />
 
     <ul
@@ -57,10 +57,12 @@
   import { createGUID }          from '../../utils/misc';
   import { IAutocompleteOption } from './IAutocompleteOption';
   import VueLoader               from '../VueLoader/VueLoader';
+  import VueIconSearch           from '../icons/VueIconSearch/VueIconSearch';
 
   export default {
     name:       'VueAutocomplete',
     components: {
+      VueIconSearch,
       VueLoader,
       VueInput,
     },
diff --git a/src/app/shared/components/VueButton/VueButton.spec.ts b/src/app/shared/components/VueButton/VueButton.spec.ts
index d476d1fb..d495554a 100644
--- a/src/app/shared/components/VueButton/VueButton.spec.ts
+++ b/src/app/shared/components/VueButton/VueButton.spec.ts
@@ -91,15 +91,4 @@ describe('VueButton.vue', () => {
     expect(wrapper.findAll(`.pulse`)).toHaveLength(1);
   });
 
-  test('should add icon', () => {
-    const wrapper = mount(VueButton, {
-      localVue,
-      propsData: {
-        icon: 'user',
-      },
-    });
-
-    expect(wrapper.findAll(`.fa-user`)).toHaveLength(1);
-  });
-
 });
diff --git a/src/app/shared/components/VueButton/VueButton.stories.ts b/src/app/shared/components/VueButton/VueButton.stories.ts
index 57637b3a..df5ac7e2 100644
--- a/src/app/shared/components/VueButton/VueButton.stories.ts
+++ b/src/app/shared/components/VueButton/VueButton.stories.ts
@@ -19,10 +19,6 @@ const storySchema = [
     label: 'Default Pulse',
     props: ['pulse'],
   },
-  {
-    label: 'Default with Icon',
-    props: ['icon="user"'],
-  },
   {
     label: 'Primary',
     props: ['primary'],
@@ -35,10 +31,6 @@ const storySchema = [
     label: 'Primary Pulse',
     props: ['primary', 'pulse'],
   },
-  {
-    label: 'Primary with Icon',
-    props: ['primary', 'icon="user"'],
-  },
   {
     label: 'Accent',
     props: ['accent'],
@@ -51,10 +43,6 @@ const storySchema = [
     label: 'Accent Pulse',
     props: ['accent', 'pulse'],
   },
-  {
-    label: 'Accent with Icon',
-    props: ['accent', 'icon="user"'],
-  },
   {
     label: 'Warn',
     props: ['warn'],
@@ -67,10 +55,6 @@ const storySchema = [
     label: 'Warn Pulse',
     props: ['warn', 'pulse'],
   },
-  {
-    label: 'Warn with Icon',
-    props: ['warn', 'icon="user"'],
-  },
 ];
 
 for (const item of storySchema) {
diff --git a/src/app/shared/components/VueButton/VueButton.vue b/src/app/shared/components/VueButton/VueButton.vue
index b413f7b9..6f20f79f 100644
--- a/src/app/shared/components/VueButton/VueButton.vue
+++ b/src/app/shared/components/VueButton/VueButton.vue
@@ -4,7 +4,6 @@
     :disabled="disabled"
     @click="onClick"
     v-bind="$attrs">
-    <i v-if="$props.icon" :class="iconClasses" />
     <slot v-if="loading === false" />
     <vue-loader v-if="loading === true" />
   </button>
@@ -46,11 +45,6 @@
         required: false,
         default:  false,
       },
-      icon:     {
-        type:     String,
-        required: false,
-        default:  '',
-      },
     },
     components: {
       VueLoader,
@@ -63,9 +57,6 @@
       },
     },
     computed:   {
-      iconClasses() {
-        return `fas fa-${this.icon}`;
-      },
       cssClasses() {
         const classes = [this.$style.button, this.$style.ripple];
 
diff --git a/src/app/shared/components/VueCookieConsent/VueCookieConsent.vue b/src/app/shared/components/VueCookieConsent/VueCookieConsent.vue
index 831f3aab..b8b3f708 100644
--- a/src/app/shared/components/VueCookieConsent/VueCookieConsent.vue
+++ b/src/app/shared/components/VueCookieConsent/VueCookieConsent.vue
@@ -1,25 +1,26 @@
 <template>
   <fade-animation>
-      <div :class="$style.vueCookieConsent" v-if="show" ref="cookieConsent">
-        <div :class="$style.content">
-          <slot />
-        </div>
+    <div :class="$style.vueCookieConsent" v-if="show" ref="cookieConsent">
+      <div :class="$style.content">
+        <slot />
+      </div>
 
-        <div role="button" :class="$style.button" @click="onConsent">
-          <div :class="$style.icon">
-            <i class="fa fa-times" />
-          </div>
+      <div role="button" :class="$style.button" @click="onConsent">
+        <div :class="$style.icon">
+          <vue-icon-times />
         </div>
       </div>
+    </div>
   </fade-animation>
 </template>
 
 <script lang="ts">
   import FadeAnimation from '../../animations/FadeAnimation/FadeAnimation';
+  import VueIconTimes  from '../icons/VueIconTimes/VueIconTimes';
 
   export default {
     name:       'VueCookieConsent',
-    components: { FadeAnimation },
+    components: { FadeAnimation, VueIconTimes },
     props:      {
       currentVersion:          {
         type:     String,
@@ -57,7 +58,7 @@
     },
     watch:      {
       show: function (show: boolean) {
-        if (!show){
+        if (!show) {
           this.removeBodyPadding();
         }
       },
@@ -91,9 +92,12 @@
     align-items:     center;
     flex:            0 0 $space-unit * 8;
     background:      $button-accent-bg;
-    color:           $button-accent-color;
     cursor:          pointer;
 
+    i {
+      fill: $button-accent-color;
+    }
+
     &:hover {
       background-color: $button-accent-hover-bg;
     }
diff --git a/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.spec.ts b/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.spec.ts
index 5f206e25..97de001b 100644
--- a/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.spec.ts
+++ b/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.spec.ts
@@ -1,6 +1,9 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import VueDataTableHeader        from './VueDataTableHeader.vue';
 import { IDataTableHeaderItem }  from '../IDataTable';
+import VueIconSort               from '../../icons/VueIconSort/VueIconSort.vue';
+import VueIconSortDown               from '../../icons/VueIconSortDown/VueIconSortDown.vue';
+import VueIconSortUp               from '../../icons/VueIconSortUp/VueIconSortUp.vue';
 
 const localVue = createLocalVue();
 
@@ -24,7 +27,7 @@ describe('VueDataTableHeader.vue', () => {
     );
 
     expect(wrapper.findAll('.column')).toHaveLength(3);
-    expect(wrapper.findAll('.fa-sort')).toHaveLength(3);
+    expect(wrapper.findAll(VueIconSort)).toHaveLength(3);
   });
 
   test('renders component with active sorting asc', () => {
@@ -40,8 +43,8 @@ describe('VueDataTableHeader.vue', () => {
                           },
     );
 
-    expect(wrapper.findAll('.fa-sort')).toHaveLength(0);
-    expect(wrapper.findAll('.fa-sort-up')).toHaveLength(1);
+    expect(wrapper.findAll(VueIconSort)).toHaveLength(0);
+    expect(wrapper.findAll(VueIconSortUp)).toHaveLength(1);
   });
 
   test('renders component with active sorting desc', () => {
@@ -57,8 +60,8 @@ describe('VueDataTableHeader.vue', () => {
                           },
     );
 
-    expect(wrapper.findAll('.fa-sort')).toHaveLength(0);
-    expect(wrapper.findAll('.fa-sort-down')).toHaveLength(1);
+    expect(wrapper.findAll(VueIconSort)).toHaveLength(0);
+    expect(wrapper.findAll(VueIconSortDown)).toHaveLength(1);
   });
 
   test('should populate sortKey on click', () => {
diff --git a/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue b/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue
index d2eada1d..e6dc0b0e 100644
--- a/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue
+++ b/src/app/shared/components/VueDataTable/VueDataTableHeader/VueDataTableHeader.vue
@@ -8,20 +8,23 @@
 
       {{ column.title }}
 
-      <i v-if="!sortKey && !isActive(column.sortKey)"
-         class="fas fa-sort" />
-      <i v-if="isActive(column.sortKey)"
-         :class="sortDirection === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down'" />
+      <vue-icon-sort v-if="!sortKey && !isActive(column.sortKey)" />
+      <vue-icon-sort-up v-if="isActive(column.sortKey) && sortDirection === 'asc'" />
+      <vue-icon-sort-down v-if="isActive(column.sortKey) && sortDirection === 'desc'" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
   import { IDataTableHeaderItem } from '../IDataTable';
+  import VueIconSort              from '../../icons/VueIconSort/VueIconSort';
+  import VueIconSortUp            from '../../icons/VueIconSortUp/VueIconSortUp';
+  import VueIconSortDown          from '../../icons/VueIconSortDown/VueIconSortDown';
 
   export default {
-    name:    'VueDataTableHeader',
-    props:   {
+    name:       'VueDataTableHeader',
+    components: { VueIconSortDown, VueIconSortUp, VueIconSort },
+    props:      {
       columns:       {
         type:     Array,
         required: true,
@@ -31,14 +34,14 @@
         required: true,
       },
       sortKey:       {
-        type:    String,
+        type: String,
       },
       sortDirection: {
         type:     String,
         required: true,
       },
     },
-    methods: {
+    methods:    {
       onClick(column: IDataTableHeaderItem) {
         this.$emit('click', column);
       },
@@ -71,7 +74,7 @@
 
     &:hover {
       i {
-        color:   $brand-accent;
+        fill:    $brand-accent;
         opacity: 1;
       }
     }
diff --git a/src/app/shared/components/VueFooter/VueFooter.vue b/src/app/shared/components/VueFooter/VueFooter.vue
index a55b5dba..31b2e4a8 100644
--- a/src/app/shared/components/VueFooter/VueFooter.vue
+++ b/src/app/shared/components/VueFooter/VueFooter.vue
@@ -8,16 +8,17 @@
 
         <vue-grid-item>
           <a href="https://github.com/devCrossNet" target="_blank" rel="noopener" aria-label="github profile">
-            <i class="fab fa-github-alt" />
+            <vue-icon-github-alt />
           </a>
           <a href="https://twitter.com/_jwerner_" target="_blank" rel="noopener" aria-label="twitter profile">
-            <i class="fab fa-twitter-square" />
+            <vue-icon-twitter-square />
           </a>
         </vue-grid-item>
 
         <vue-grid-item>
-          <small><a href="https://github.com/devCrossNet/vue-starter/blob/master/LICENSE" target="_blank" rel="noopener">MIT
-                                                                                                                         License</a>
+          <small><a href="https://github.com/devCrossNet/vue-starter/blob/master/LICENSE" target="_blank"
+                    rel="noopener">MIT
+                                   License</a>
           </small>
         </vue-grid-item>
       </vue-grid-row>
@@ -26,13 +27,17 @@
 </template>
 
 <script lang="ts">
-  import VueGrid     from '../VueGrid/VueGrid';
-  import VueGridItem from '../VueGridItem/VueGridItem';
-  import VueGridRow  from '../VueGridRow/VueGridRow';
+  import VueGrid              from '../VueGrid/VueGrid';
+  import VueGridItem          from '../VueGridItem/VueGridItem';
+  import VueGridRow           from '../VueGridRow/VueGridRow';
+  import VueIconGithubAlt     from '../icons/VueIconGithubAlt/VueIconGithubAlt';
+  import VueIconTwitterSquare from '../icons/VueIconTwitterSquare/VueIconTwitterSquare';
 
   export default {
     name:       'VueFooter',
     components: {
+      VueIconTwitterSquare,
+      VueIconGithubAlt,
       VueGrid,
       VueGridItem,
       VueGridRow,
@@ -55,8 +60,10 @@
     text-align: center;
 
     i {
-      font-size: $font-size-h1;
-      margin:    0 $space-unit * 2;
+      height: $font-size-h1;
+      width:  $font-size-h1;
+      fill:   $brand-accent;
+      margin: 0 $space-unit * 2;
     }
 
     small {
diff --git a/src/app/shared/components/VueSelect/VueSelect.vue b/src/app/shared/components/VueSelect/VueSelect.vue
index a677d0cf..6a653e91 100644
--- a/src/app/shared/components/VueSelect/VueSelect.vue
+++ b/src/app/shared/components/VueSelect/VueSelect.vue
@@ -182,6 +182,8 @@
     position: absolute;
     right:    24px;
     top:      20px;
+    height:   auto;
+    width:    auto;
 
     &:before, &:after {
       content:          "";
diff --git a/src/app/shared/components/VueTabGroup/VueTabGroup.stories.ts b/src/app/shared/components/VueTabGroup/VueTabGroup.stories.ts
index ef214a8e..0d7d7378 100644
--- a/src/app/shared/components/VueTabGroup/VueTabGroup.stories.ts
+++ b/src/app/shared/components/VueTabGroup/VueTabGroup.stories.ts
@@ -14,7 +14,7 @@ story.add('Default', () => ({
   },
   template: `
 <vue-tab-group>
-  <vue-tab-item title="Profile" icon="fas fa-user">
+  <vue-tab-item title="Profile">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
     labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
@@ -22,13 +22,13 @@ story.add('Default', () => ({
     labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
   </vue-tab-item>
-  <vue-tab-item title="Settings" icon="fas fa-cog">
+  <vue-tab-item title="Settings">
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
     labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
   </vue-tab-item>
-  <vue-tab-item title="Upload" icon="fas fa-upload">
+  <vue-tab-item title="Upload">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
     labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
     et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/src/app/shared/components/VueTabGroup/VueTabGroup.vue b/src/app/shared/components/VueTabGroup/VueTabGroup.vue
index 946fab25..83fe3836 100644
--- a/src/app/shared/components/VueTabGroup/VueTabGroup.vue
+++ b/src/app/shared/components/VueTabGroup/VueTabGroup.vue
@@ -9,12 +9,13 @@
         :class="currentTab === header.idx ? $style.active : ''"
         role="tab">
         <div :class="$style.bg"></div>
-        <i :class="[$style.icon, header.icon]"></i>
         <span :class="$style.title">{{header.title}}</span>
       </li>
     </ul>
 
-    <slot />
+    <div :class="$style.body">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -70,7 +71,6 @@
   .vueTabGroup {
     background: $tab-group-bg;
     box-shadow: $tab-group-shadow;
-    padding:    $tab-group-padding;
     margin:     $tab-group-margin;
   }
 
@@ -81,28 +81,15 @@
     display:    flex;
     width:      100%;
     background: $tab-group-header-bg;
-    box-shadow: $tab-group-header-shadow;
     position:   relative;
-    top:        -($space-unit * 2);
 
     li {
       padding:          $tab-group-header-item-padding;
       flex:             1;
       text-align:       center;
-      position:         relative;
-      border-left:      $tab-group-header-item-border-left;
-      border-right:     $tab-group-header-item-border-right;
-      line-height:      1.7;
       cursor:           pointer;
       background-color: transparent;
-
-      &:first-child {
-        border-left: none;
-      }
-
-      &:last-child {
-        border-right: none;
-      }
+      position:         relative;
 
       .bg {
         position:                   absolute;
@@ -118,7 +105,7 @@
       }
 
       &.active {
-        .title, .icon {
+        .title {
           color: $tab-group-header-item-hover-color;
         }
 
@@ -132,11 +119,10 @@
         display:     block;
         font-weight: 400;
       }
-
-      .icon {
-        position:  relative;
-        font-size: $font-size-h3;
-      }
     }
   }
+
+  .body {
+    padding: $tab-group-padding;
+  }
 </style>
diff --git a/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.spec.ts b/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.spec.ts
index 30812a15..21f1ec45 100644
--- a/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.spec.ts
+++ b/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.spec.ts
@@ -13,7 +13,6 @@ describe('VueTab.vue', () => {
       },
       propsData: {
         title: 'foo',
-        icon:  'bar',
       },
     }) as any;
 
diff --git a/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.vue b/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.vue
index 0d35de4a..126cda92 100644
--- a/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.vue
+++ b/src/app/shared/components/VueTabGroup/VueTabItem/VueTabItem.vue
@@ -20,10 +20,6 @@
         type:     String,
         required: true,
       },
-      icon:  {
-        type:     String,
-        required: true,
-      },
     },
     data(): any {
       return {
diff --git a/src/app/shared/components/icons/VueIconBook/VueIconBook.vue b/src/app/shared/components/icons/VueIconBook/VueIconBook.vue
new file mode 100644
index 00000000..f71d1753
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconBook/VueIconBook.vue
@@ -0,0 +1,14 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1703 478q40 57 18 129l-275 906q-19 64-76.5 107.5t-122.5 43.5h-923q-77 0-148.5-53.5t-99.5-131.5q-24-67-2-127 0-4 3-27t4-37q1-8-3-21.5t-3-19.5q2-11 8-21t16.5-23.5 16.5-23.5q23-38 45-91.5t30-91.5q3-10 .5-30t-.5-28q3-11 17-28t17-23q21-36 42-92t25-90q1-9-2.5-32t.5-28q4-13 22-30.5t22-22.5q19-26 42.5-84.5t27.5-96.5q1-8-3-25.5t-2-26.5q2-8 9-18t18-23 17-21q8-12 16.5-30.5t15-35 16-36 19.5-32 26.5-23.5 36-11.5 47.5 5.5l-1 3q38-9 51-9h761q74 0 114 56t18 130l-274 906q-36 119-71.5 153.5t-128.5 34.5h-869q-27 0-38 15-11 16-1 43 24 70 144 70h923q29 0 56-15.5t35-41.5l300-987q7-22 5-57 38 15 59 43zm-1064 2q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5zm-83 256q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconBook',
+  };
+</script>
diff --git a/src/app/shared/components/icons/VueIconBullhorn/VueIconBullhorn.vue b/src/app/shared/components/icons/VueIconBullhorn/VueIconBullhorn.vue
new file mode 100644
index 00000000..2bf3a21c
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconBullhorn/VueIconBullhorn.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1664 640q53 0 90.5 37.5t37.5 90.5-37.5 90.5-90.5 37.5v384q0 52-38 90t-90 38q-417-347-812-380-58 19-91 66t-31 100.5 40 92.5q-20 33-23 65.5t6 58 33.5 55 48 50 61.5 50.5q-29 58-111.5 83t-168.5 11.5-132-55.5q-7-23-29.5-87.5t-32-94.5-23-89-15-101 3.5-98.5 22-110.5h-122q-66 0-113-47t-47-113v-192q0-66 47-113t113-47h480q435 0 896-384 52 0 90 38t38 90v384zm-128 604v-954q-394 302-768 343v270q377 42 768 341z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconBullhorn',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconCertificate/VueIconCertificate.vue b/src/app/shared/components/icons/VueIconCertificate/VueIconCertificate.vue
new file mode 100644
index 00000000..00573377
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconCertificate/VueIconCertificate.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1504 896l138 135q30 28 20 70-12 41-52 51l-188 48 53 186q12 41-19 70-29 31-70 19l-186-53-48 188q-10 40-51 52-12 2-19 2-31 0-51-22l-135-138-135 138q-28 30-70 20-41-11-51-52l-48-188-186 53q-41 12-70-19-31-29-19-70l53-186-188-48q-40-10-52-51-10-42 20-70l138-135-138-135q-30-28-20-70 12-41 52-51l188-48-53-186q-12-41 19-70 29-31 70-19l186 53 48-188q10-41 51-51 41-12 70 19l135 139 135-139q29-30 70-19 41 10 51 51l48 188 186-53q41-12 70 19 31 29 19 70l-53 186 188 48q40 10 52 51 10 42-20 70z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconCertificate',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconChartLine/VueIconChartLine.vue b/src/app/shared/components/icons/VueIconChartLine/VueIconChartLine.vue
new file mode 100644
index 00000000..b7f68ce2
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconChartLine/VueIconChartLine.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2048 1536v128h-2048v-1536h128v1408h1920zm-128-1248v435q0 21-19.5 29.5t-35.5-7.5l-121-121-633 633q-10 10-23 10t-23-10l-233-233-416 416-192-192 585-585q10-10 23-10t23 10l233 233 464-464-121-121q-16-16-7.5-35.5t29.5-19.5h435q14 0 23 9t9 23z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconChartLine',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconCode/VueIconCode.vue b/src/app/shared/components/icons/VueIconCode/VueIconCode.vue
new file mode 100644
index 00000000..6aacca7e
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconCode/VueIconCode.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 2048 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M681 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconCode',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconFlag/VueIconFlag.vue b/src/app/shared/components/icons/VueIconFlag/VueIconFlag.vue
new file mode 100644
index 00000000..61c6aaa5
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconFlag/VueIconFlag.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M320 256q0 72-64 110v1266q0 13-9.5 22.5t-22.5 9.5h-64q-13 0-22.5-9.5t-9.5-22.5v-1266q-64-38-64-110 0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm1472 64v763q0 25-12.5 38.5t-39.5 27.5q-215 116-369 116-61 0-123.5-22t-108.5-48-115.5-48-142.5-22q-192 0-464 146-17 9-33 9-26 0-45-19t-19-45v-742q0-32 31-55 21-14 79-43 236-120 421-120 107 0 200 29t219 88q38 19 88 19 54 0 117.5-21t110-47 88-47 54.5-21q26 0 45 19t19 45z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconFlag',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconGithub/VueIconGithub.vue b/src/app/shared/components/icons/VueIconGithub/VueIconGithub.vue
new file mode 100644
index 00000000..87f5895b
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconGithub/VueIconGithub.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconGithub',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconGithubAlt/VueIconGithubAlt.vue b/src/app/shared/components/icons/VueIconGithubAlt/VueIconGithubAlt.vue
new file mode 100644
index 00000000..6dd1b897
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconGithubAlt/VueIconGithubAlt.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M704 1216q0 40-12.5 82t-43 76-72.5 34-72.5-34-43-76-12.5-82 12.5-82 43-76 72.5-34 72.5 34 43 76 12.5 82zm640 0q0 40-12.5 82t-43 76-72.5 34-72.5-34-43-76-12.5-82 12.5-82 43-76 72.5-34 72.5 34 43 76 12.5 82zm160 0q0-120-69-204t-187-84q-41 0-195 21-71 11-157 11t-157-11q-152-21-195-21-118 0-187 84t-69 204q0 88 32 153.5t81 103 122 60 140 29.5 149 7h168q82 0 149-7t140-29.5 122-60 81-103 32-153.5zm224-176q0 207-61 331-38 77-105.5 133t-141 86-170 47.5-171.5 22-167 4.5q-78 0-142-3t-147.5-12.5-152.5-30-137-51.5-121-81-86-115q-62-123-62-331 0-237 136-396-27-82-27-170 0-116 51-218 108 0 190 39.5t189 123.5q147-35 309-35 148 0 280 32 105-82 187-121t189-39q51 102 51 218 0 87-27 168 136 160 136 398z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconGithubAlt',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconHashtag/VueIconHashtag.vue b/src/app/shared/components/icons/VueIconHashtag/VueIconHashtag.vue
new file mode 100644
index 00000000..08804db3
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconHashtag/VueIconHashtag.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M991 1024l64-256h-254l-64 256h254zm768-504l-56 224q-7 24-31 24h-327l-64 256h311q15 0 25 12 10 14 6 28l-56 224q-5 24-31 24h-327l-81 328q-7 24-31 24h-224q-16 0-26-12-9-12-6-28l78-312h-254l-81 328q-7 24-31 24h-225q-15 0-25-12-9-12-6-28l78-312h-311q-15 0-25-12-9-12-6-28l56-224q7-24 31-24h327l64-256h-311q-15 0-25-12-10-14-6-28l56-224q5-24 31-24h327l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h254l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h311q15 0 25 12 9 12 6 28z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconHashtag',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconMobile/VueIconMobile.vue b/src/app/shared/components/icons/VueIconMobile/VueIconMobile.vue
new file mode 100644
index 00000000..d7dda4d3
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconMobile/VueIconMobile.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M976 1408q0-33-23.5-56.5t-56.5-23.5-56.5 23.5-23.5 56.5 23.5 56.5 56.5 23.5 56.5-23.5 23.5-56.5zm208-160v-704q0-13-9.5-22.5t-22.5-9.5h-512q-13 0-22.5 9.5t-9.5 22.5v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5t9.5-22.5zm-192-848q0-16-16-16h-160q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38h-512q-52 0-90-38t-38-90v-1024q0-52 38-90t90-38h512q52 0 90 38t38 90z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconMobile',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece.vue b/src/app/shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece.vue
new file mode 100644
index 00000000..38c37f9e
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconPuzzlePiece/VueIconPuzzlePiece.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1728 1098q0 81-44.5 135t-123.5 54q-41 0-77.5-17.5t-59-38-56.5-38-71-17.5q-110 0-110 124 0 39 16 115t15 115v5q-22 0-33 1-34 3-97.5 11.5t-115.5 13.5-98 5q-61 0-103-26.5t-42-83.5q0-37 17.5-71t38-56.5 38-59 17.5-77.5q0-79-54-123.5t-135-44.5q-84 0-143 45.5t-59 127.5q0 43 15 83t33.5 64.5 33.5 53 15 50.5q0 45-46 89-37 35-117 35-95 0-245-24-9-2-27.5-4t-27.5-4l-13-2q-1 0-3-1-2 0-2-1v-1024q2 1 17.5 3.5t34 5 21.5 3.5q150 24 245 24 80 0 117-35 46-44 46-89 0-22-15-50.5t-33.5-53-33.5-64.5-15-83q0-82 59-127.5t144-45.5q80 0 134 44.5t54 123.5q0 41-17.5 77.5t-38 59-38 56.5-17.5 71q0 57 42 83.5t103 26.5q64 0 180-15t163-17v2q-1 2-3.5 17.5t-5 34-3.5 21.5q-24 150-24 245 0 80 35 117 44 46 89 46 22 0 50.5-15t53-33.5 64.5-33.5 83-15q82 0 127.5 59t45.5 143z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconPuzzlePiece',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconSearch/VueIconSearch.vue b/src/app/shared/components/icons/VueIconSearch/VueIconSearch.vue
new file mode 100644
index 00000000..8b3f9f9f
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconSearch/VueIconSearch.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconSearch',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconSort/VueIconSort.vue b/src/app/shared/components/icons/VueIconSort/VueIconSort.vue
new file mode 100644
index 00000000..dec948c2
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconSort/VueIconSort.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconSort',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconSortDown/VueIconSortDown.vue b/src/app/shared/components/icons/VueIconSortDown/VueIconSortDown.vue
new file mode 100644
index 00000000..3c44b81f
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconSortDown/VueIconSortDown.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconSortDown',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconSortUp/VueIconSortUp.vue b/src/app/shared/components/icons/VueIconSortUp/VueIconSortUp.vue
new file mode 100644
index 00000000..8e61c708
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconSortUp/VueIconSortUp.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1408 704q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconSortUp',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconSpinner/VueIconSpinner.vue b/src/app/shared/components/icons/VueIconSpinner/VueIconSpinner.vue
new file mode 100644
index 00000000..c3ad7729
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconSpinner/VueIconSpinner.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconSpinner',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconTimes/VueIconTimes.vue b/src/app/shared/components/icons/VueIconTimes/VueIconTimes.vue
new file mode 100644
index 00000000..96f1c548
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconTimes/VueIconTimes.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconTimes',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/VueIconTwitterSquare/VueIconTwitterSquare.vue b/src/app/shared/components/icons/VueIconTwitterSquare/VueIconTwitterSquare.vue
new file mode 100644
index 00000000..9cfed239
--- /dev/null
+++ b/src/app/shared/components/icons/VueIconTwitterSquare/VueIconTwitterSquare.vue
@@ -0,0 +1,16 @@
+<template>
+  <i>
+    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1408 610q-56 25-121 34 68-40 93-117-65 38-134 51-61-66-153-66-87 0-148.5 61.5t-61.5 148.5q0 29 5 48-129-7-242-65t-192-155q-29 50-29 106 0 114 91 175-47-1-100-26v2q0 75 50 133.5t123 72.5q-29 8-51 8-13 0-39-4 21 63 74.5 104t121.5 42q-116 90-261 90-26 0-50-3 148 94 322 94 112 0 210-35.5t168-95 120.5-137 75-162 24.5-168.5q0-18-1-27 63-45 105-109zm256-194v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z" />
+    </svg>
+  </i>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'VueIconTwitterSquare',
+  };
+</script>
+
+<style lang="scss" module></style>
diff --git a/src/app/shared/components/icons/icons.stories.ts b/src/app/shared/components/icons/icons.stories.ts
new file mode 100644
index 00000000..2fa76708
--- /dev/null
+++ b/src/app/shared/components/icons/icons.stories.ts
@@ -0,0 +1,70 @@
+import { storiesOf }        from '@storybook/vue';
+import VueInfoAddon         from 'storybook-addon-vue-info';
+import VueGridItem          from '../VueGridItem/VueGridItem.vue';
+import VueIconBook          from './VueIconBook/VueIconBook.vue';
+import VueIconBullhorn      from './VueIconBullhorn/VueIconBullhorn.vue';
+import VueIconCertificate   from './VueIconCertificate/VueIconCertificate.vue';
+import VueIconChartLine     from './VueIconChartLine/VueIconChartLine.vue';
+import VueIconCode          from './VueIconCode/VueIconCode.vue';
+import VueIconFlag          from './VueIconFlag/VueIconFlag.vue';
+import VueIconGithub        from './VueIconGithub/VueIconGithub.vue';
+import VueIconGithubAlt     from './VueIconGithubAlt/VueIconGithubAlt.vue';
+import VueIconHashtag       from './VueIconHashtag/VueIconHashtag.vue';
+import VueIconMobile        from './VueIconMobile/VueIconMobile.vue';
+import VueIconPuzzlePiece   from './VueIconPuzzlePiece/VueIconPuzzlePiece.vue';
+import VueIconSearch        from './VueIconSearch/VueIconSearch.vue';
+import VueIconSort          from './VueIconSort/VueIconSort.vue';
+import VueIconSortDown      from './VueIconSortDown/VueIconSortDown.vue';
+import VueIconSortUp        from './VueIconSortUp/VueIconSortUp.vue';
+import VueIconSpinner       from './VueIconSpinner/VueIconSpinner.vue';
+import VueIconTimes         from './VueIconTimes/VueIconTimes.vue';
+import VueIconTwitterSquare from './VueIconTwitterSquare/VueIconTwitterSquare.vue';
+
+const story = (storiesOf('icons', module) as any);
+
+story.addDecorator(VueInfoAddon);
+
+story.add('Default', () => ({
+  components: {
+    VueGridItem,
+    VueIconBook,
+    VueIconBullhorn,
+    VueIconCertificate,
+    VueIconChartLine,
+    VueIconCode,
+    VueIconFlag,
+    VueIconGithub,
+    VueIconGithubAlt,
+    VueIconHashtag,
+    VueIconMobile,
+    VueIconPuzzlePiece,
+    VueIconSearch,
+    VueIconSort,
+    VueIconSortDown,
+    VueIconSortUp,
+    VueIconSpinner,
+    VueIconTimes,
+    VueIconTwitterSquare,
+  },
+  template:   `
+<vue-grid-item>
+  <vue-icon-book />
+  <vue-icon-bullhorn />
+  <vue-icon-certificate />
+  <vue-icon-chart-line />
+  <vue-icon-code/>
+  <vue-icon-flag />
+  <vue-icon-github/>
+  <vue-icon-github-alt/>
+  <vue-icon-hashtag/>
+  <vue-icon-mobile/>
+  <vue-icon-puzzle-piece/>
+  <vue-icon-search/>
+  <vue-icon-sort/>
+  <vue-icon-sort-down/>
+  <vue-icon-sort-up/>
+  <vue-icon-spinner/>
+  <vue-icon-times/>
+  <vue-icon-twitter-square/>
+</vue-grid-item>`,
+}));
diff --git a/src/app/shared/styles/_variables.scss b/src/app/shared/styles/_variables.scss
index 948e679d..a1f67f1b 100644
--- a/src/app/shared/styles/_variables.scss
+++ b/src/app/shared/styles/_variables.scss
@@ -201,16 +201,14 @@ $footer-color: $text-color-inverse;
 /* Tabs */
 $tab-group-bg: $panel-bg;
 $tab-group-shadow: $nav-bar-shadow;
-$tab-group-padding: 0 $space-unit * 2 $space-unit * 2;
+$tab-group-padding: $space-unit * 2;
 $tab-group-margin: $space-unit * 4 0 0 0;
 
-$tab-group-header-bg: $panel-bg;
-$tab-group-header-shadow: $nav-bar-shadow;
-$tab-group-header-item-padding: $space-unit * 1.5 $space-unit $space-unit;
-$tab-group-header-item-border-left: 1px solid lighten($panel-bg, 2%);
-$tab-group-header-item-border-right: 1px solid darken($panel-bg, 2%);
-$tab-group-header-item-hover-bg: $brand-primary;
-$tab-group-header-item-hover-color: $bg-color;
+$tab-group-header-bg: $bg-color;
+$tab-group-header-bg: $bg-color;
+$tab-group-header-item-padding: $space-unit * 2;
+$tab-group-header-item-hover-bg: $panel-bg;
+$tab-group-header-item-hover-color: $text-color;
 
 $tab-item-transition: transform $transition-duration linear;
 
@@ -377,7 +375,7 @@ $toggle-height: $space-unit * 1.5;
 $toggle-transition: all $transition-duration ease-in-out;
 
 $toggle-handle-border-radius: 50%;
-$toggle-handle-size:$space-unit * 3;
+$toggle-handle-size: $space-unit * 3;
 $toggle-handle-bg: $bg-color-inverse;
 $toggle-handle-shadow: $panel-shadow;
 $toggle-handle-checked-bg: $brand-accent;
diff --git a/src/app/shared/styles/global.scss b/src/app/shared/styles/global.scss
index feff0433..ae4519d4 100644
--- a/src/app/shared/styles/global.scss
+++ b/src/app/shared/styles/global.scss
@@ -11,3 +11,27 @@ img[alt=""],
 img:not([alt]) {
   border: 5px dashed $brand-warn;
 }
+
+/* vue-icon global style */
+i {
+  display: inline-block;
+  height:  $font-size;
+  width:   $font-size;
+  fill:    $text-color;
+
+  @include media(tabletLandscape) {
+    height: $font-size * $font-size-factor-tablet-landscape;
+    width:  $font-size * $font-size-factor-tablet-landscape;
+  }
+
+  @include media(largeDesktop) {
+    height: $font-size * $font-size-factor-large-desktop;
+    width:  $font-size * $font-size-factor-large-desktop;
+  }
+
+  svg {
+    height: inherit;
+    width:  inherit;
+  }
+}
+
diff --git a/src/index.template.html b/src/index.template.html
index aeb70c6c..e7be8253 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -5,16 +5,7 @@
   <meta charset="utf-8">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui">
-  <meta name="theme-color" content="#17BEBB">
-  <script>
-    function loadAsyncStyleSheets() {
-      for (var e = document.getElementsByTagName('head')[0], t = ['https://use.fontawesome.com/releases/v5.0.2/css/all.css'], s = 0; s < t.length; s++) {
-        var a = document.createElement('link'), l = document.createAttribute('rel'), n = document.createAttribute('href');
-        l.value = 'stylesheet', n.value = t[s], a.setAttributeNode(l), a.setAttributeNode(n), e.appendChild(a);
-      }
-    }
-    window.addEventListener('load', loadAsyncStyleSheets, !1);
-  </script><% for (var chunk of webpack.chunks) {
+  <meta name="theme-color" content="#17BEBB"><% for (var chunk of webpack.chunks) {
   for (var file of chunk.files) {
   if (file.match(/\.(js|css)$/)) { %>
   <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>