Add SVG icons and empty howto page

styles/base.css

@@ -2,7 +2,7 @@
   --color-gray-dark: #475157;
   --color-gray-dark-alt: #4F585E;
   --color-gray-dark-alt2: #525C63;
-  --color-gray-normal: #979797;
+  --color-gray-normal: #A1A6AA;
   --color-gray-light: #7D878D;
 
   --color-white: #fff;

styles/components/icon-link.css

@@ -2,7 +2,6 @@
   display: inline-block;
   position: relative;
   text-decoration: none;
-  padding-left: 30px;
   height: 25px;
   font-size: 14px;
   line-height: 25px;
@@ -16,19 +15,13 @@
     font-size: 16px;
   }
 
+  &__icon {
+    margin-right: 6px;
+    position: relative;
+    top: -1px;
+  }
+
   &:hover {
     text-decoration: underline;
   }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 25px;
-    height: 25px;
-    /* TODO icon*/
-    background: var(--color-gray-normal);
-    border-radius: 50%;
-  }
 }

styles/components/icon.css

@@ -0,0 +1,29 @@
+.icon {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-size: 22px 22px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  vertical-align: middle;
+
+  &--pie {
+    background-image: url('/assets/icons/pie.svg');
+  }
+
+  &--question {
+    background-image: url('/assets/icons/question.svg');
+  }
+
+  &--overview {
+    background-image: url('/assets/icons/overview.svg');
+  }
+
+  &--search {
+    background-image: url('/assets/icons/search.svg');
+  }
+
+  &--back {
+    background-image: url('/assets/icons/back.svg');
+  }
+}

styles/components/markdown.css

@@ -1,4 +1,4 @@
-.item-details {
+.markdown {
   color: var(--color-gray-normal);
   font-size: 16px;