From 64f04305d39eee5c4f8cb5ee5383bba872fd293f Mon Sep 17 00:00:00 2001
From: Thibaut Courouble <thibaut@me.com>
Date: Sat, 9 Sep 2017 14:57:53 -0400
Subject: [PATCH] Replace all remaining PNG UI icons with SVGs

---
 assets/images/icons.png                       | Bin 1079 -> 0 bytes
 assets/images/icons@2x.png                    | Bin 2225 -> 0 bytes
 .../javascripts/templates/notif_tmpl.coffee   |   5 ++-
 assets/javascripts/templates/path_tmpl.coffee |   2 +-
 .../javascripts/templates/sidebar_tmpl.coffee |   2 +-
 .../views/content/entry_page.coffee           |  18 +++++----
 assets/stylesheets/application-dark.css.scss  |   2 -
 assets/stylesheets/application.css.scss       |   2 -
 assets/stylesheets/components/_content.scss   |  19 ++++-----
 assets/stylesheets/components/_header.scss    |  38 +++++++++---------
 assets/stylesheets/components/_mobile.scss    |   3 +-
 assets/stylesheets/components/_notif.scss     |   5 ++-
 assets/stylesheets/components/_settings.scss  |   5 +--
 assets/stylesheets/global/_classes.scss       |  15 ++++---
 assets/stylesheets/global/_icons.scss         |  24 +++--------
 lib/app.rb                                    |   2 -
 public/icons/ui/clear/SOURCE                  |   1 -
 public/icons/ui/clear/clear.png               | Bin 305 -> 0 bytes
 public/icons/ui/clear/clear@2x.png            | Bin 588 -> 0 bytes
 public/icons/ui/clipboard-white/16.png        | Bin 151 -> 0 bytes
 public/icons/ui/clipboard-white/16@2x.png     | Bin 229 -> 0 bytes
 public/icons/ui/clipboard-white/SOURCE        |   1 -
 public/icons/ui/clipboard/16.png              | Bin 151 -> 0 bytes
 public/icons/ui/clipboard/16@2x.png           | Bin 230 -> 0 bytes
 public/icons/ui/clipboard/SOURCE              |   1 -
 public/icons/ui/close-white/SOURCE            |   1 -
 public/icons/ui/close-white/close-white.png   | Bin 281 -> 0 bytes
 .../icons/ui/close-white/close-white@2x.png   | Bin 508 -> 0 bytes
 public/icons/ui/link-white/SOURCE             |   1 -
 public/icons/ui/link-white/link-white.png     | Bin 143 -> 0 bytes
 public/icons/ui/link-white/link-white@2x.png  | Bin 233 -> 0 bytes
 public/icons/ui/link/SOURCE                   |   1 -
 public/icons/ui/link/link.png                 | Bin 230 -> 0 bytes
 public/icons/ui/link/link@2x.png              | Bin 439 -> 0 bytes
 public/icons/ui/search-white/SOURCE           |   1 -
 public/icons/ui/search-white/search-white.png | Bin 248 -> 0 bytes
 .../icons/ui/search-white/search-white@2x.png | Bin 465 -> 0 bytes
 public/icons/ui/search/SOURCE                 |   1 -
 public/icons/ui/search/search.png             | Bin 371 -> 0 bytes
 public/icons/ui/search/search@2x.png          | Bin 774 -> 0 bytes
 views/app.erb                                 |  25 +++++++-----
 41 files changed, 83 insertions(+), 92 deletions(-)
 delete mode 100644 assets/images/icons.png
 delete mode 100644 assets/images/icons@2x.png
 delete mode 100644 public/icons/ui/clear/SOURCE
 delete mode 100644 public/icons/ui/clear/clear.png
 delete mode 100644 public/icons/ui/clear/clear@2x.png
 delete mode 100644 public/icons/ui/clipboard-white/16.png
 delete mode 100644 public/icons/ui/clipboard-white/16@2x.png
 delete mode 100644 public/icons/ui/clipboard-white/SOURCE
 delete mode 100644 public/icons/ui/clipboard/16.png
 delete mode 100644 public/icons/ui/clipboard/16@2x.png
 delete mode 100644 public/icons/ui/clipboard/SOURCE
 delete mode 100644 public/icons/ui/close-white/SOURCE
 delete mode 100644 public/icons/ui/close-white/close-white.png
 delete mode 100644 public/icons/ui/close-white/close-white@2x.png
 delete mode 100644 public/icons/ui/link-white/SOURCE
 delete mode 100644 public/icons/ui/link-white/link-white.png
 delete mode 100644 public/icons/ui/link-white/link-white@2x.png
 delete mode 100644 public/icons/ui/link/SOURCE
 delete mode 100644 public/icons/ui/link/link.png
 delete mode 100644 public/icons/ui/link/link@2x.png
 delete mode 100644 public/icons/ui/search-white/SOURCE
 delete mode 100644 public/icons/ui/search-white/search-white.png
 delete mode 100644 public/icons/ui/search-white/search-white@2x.png
 delete mode 100644 public/icons/ui/search/SOURCE
 delete mode 100644 public/icons/ui/search/search.png
 delete mode 100644 public/icons/ui/search/search@2x.png

diff --git a/assets/images/icons.png b/assets/images/icons.png
deleted file mode 100644
index 8aba11bbc854b65e91a3d89c73941e9b7cde633a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1079
zcmV-71jze|P)<h;3K|Lk000e1NJLTq002M$001Be1^@s6qMd$(000C2Nkl<ZcmeI!
z0c2He9LMqJ4g|L~TdfNL0uTtv+(b=ViUlO4a3Pd<3Ak%}1+;J#Ss)m|3ui`a-nv_3
zH*SS$6`PrZo3PQnjrM=PcrK5}J<s{yW^b4J@zFZZx#!;h|9Q@Hj!8&AUR(Y6?NUM3
zsz93qc!(-Cv4jcqprccQI7-SfHz!epU=?$SAy~%%{*Po(K!n(eP_SbyBUU$((hafv
z96$|UF#<PNuwlm!VmFh+Gf0A2<U$S5^78<K^JtY32&T|}#>%%%v3y7|^UdPlqYkmY
z<DJulOsfWj6F#?!j|gQ6HH0&|uxQ5S-<t8o<EB{YGh;7qnL7*19FI-$`B9Ucf>V4i
zPN9wl&Y;I>LLsRr@hKayiD`r~2|*6Yxl^v1Vzk%%{XAzVn&QR6%O@r|)6Q%U!`LRA
z2H_ZE5Jc^+fPBii6|5qZ8Ej)uxB&|lLs;^6&FG6u=C6OU+yYakxG-Ug(q)npL;NQA
z#anT31$YJL6%D!v!9}#nVSGawMA3lpe+Nu6#rY#n@tOuSFob4?(9kr%PhPnh?!y{3
zaG^!<Zy*>~H^9%>%SR@h2!c8WotZxi!ZF4mh!iV8-vFCq&MdsbW6XHF@ef>1X}}jV
zI=}AY_?#h%O>i0eo6Fuhhdz7=Z-U`fph+(#u>!#sp5ngOgsW&j`p4jB@1EbnC(UC}
zJmF0+oGje?_9n#I#<g8~5t{wk7a?r~Kbsp6Yps)Bg-Z~n5_Xd7SiuSWNk>LR`tjQ8
z{~a4pLDs6Y@wo$dh$=R*gbDO?dch^QDJjPMYn((4LRK+{7(~`Fp!_Wv6c8b{A{3C>
ztp+sH9XO|3Y!YU^hOZd$#;#z)jvq|<9XUKhQf86c%?1P$XutyyIiGO-5fGUQ&Ae0m
zd(_d)cf50&kZH5N+c*?#fKeu)0abiV`P>p}f$@S<d@oL+jt0)4$7w<#aGgcG#c}lE
z7M2m?Xs{@05oH55F`d$YNf5~;j88kWJ#2_=!fE^WupJ{31-_?>y~rVkn<wg7^~Uol
z4X9u><r*{C#-4=n7~(g<FWx2&J;Ch1cX0_>Oko0D+7;jyoL4mH9*A5_7(a|}C>x?^
zKm$Y0*bo|RHekRxb_8Ae``Rr&5a+yoSi=S`v?%@!h>Qn*Lj)pq3_3G^*8V++y5bh7
zBpiQah<*jM(ExkyF=rNE;W1{s-TVhGr)+}D*xy|C);aXygJKi>g7p^W+Fk+LTfjND
z7n4{4ku5yMeXj{uQyzn#y?cHOpY)GGeS%Mc@Fp0J-F&*7|KCJ2+qjnSA~gF;UW9gZ
xuKu$((9BvVy$YA0O=*YUbsZ}>VSau7<UgJAQ?LNLj#dBw002ovPDHLkV1ikk@pS+I

diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png
deleted file mode 100644
index a27663998900bc00a0795da32a33b09098b6ada2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2225
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

diff --git a/assets/javascripts/templates/notif_tmpl.coffee b/assets/javascripts/templates/notif_tmpl.coffee
index 45882e87..5d284db1 100644
--- a/assets/javascripts/templates/notif_tmpl.coffee
+++ b/assets/javascripts/templates/notif_tmpl.coffee
@@ -1,6 +1,9 @@
 notif = (title, html) ->
   html = html.replace /<a /g, '<a class="_notif-link" '
-  """<h5 class="_notif-title">#{title}</h5>#{html}<button type="button" class="_notif-close" title="Close">Close</a>"""
+  """ <h5 class="_notif-title">#{title}</h5>
+      #{html}
+      <button type="button" class="_notif-close" title="Close"><svg><use xlink:href="#icon-close"/></svg>Close</a>
+  """
 
 textNotif = (title, message) ->
   notif title, """<p class="_notif-text">#{message}"""
diff --git a/assets/javascripts/templates/path_tmpl.coffee b/assets/javascripts/templates/path_tmpl.coffee
index 2bd01b9c..f28925c9 100644
--- a/assets/javascripts/templates/path_tmpl.coffee
+++ b/assets/javascripts/templates/path_tmpl.coffee
@@ -1,4 +1,4 @@
-arrow = """<svg class="_path-arrow"><use xlink:href="#dir-icon"/></svg>"""
+arrow = """<svg class="_path-arrow"><use xlink:href="#icon-dir"/></svg>"""
 
 app.templates.path = (doc, type, entry) ->
   html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""
diff --git a/assets/javascripts/templates/sidebar_tmpl.coffee b/assets/javascripts/templates/sidebar_tmpl.coffee
index 19decec4..46797e56 100644
--- a/assets/javascripts/templates/sidebar_tmpl.coffee
+++ b/assets/javascripts/templates/sidebar_tmpl.coffee
@@ -1,6 +1,6 @@
 templates = app.templates
 
-arrow = """<svg class="_list-arrow"><use xlink:href="#dir-icon"/></svg>"""
+arrow = """<svg class="_list-arrow"><use xlink:href="#icon-dir"/></svg>"""
 
 templates.sidebarDoc = (doc, options = {}) ->
   link  = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
diff --git a/assets/javascripts/views/content/entry_page.coffee b/assets/javascripts/views/content/entry_page.coffee
index 3779d5ba..130104a5 100644
--- a/assets/javascripts/views/content/entry_page.coffee
+++ b/assets/javascripts/views/content/entry_page.coffee
@@ -34,7 +34,7 @@ class app.views.EntryPage extends app.View
 
     $.batchUpdate @el, =>
       @subview.render(content, fromCache)
-      @addClipboardLinks() unless fromCache
+      @addCopyButtons() unless fromCache
       return
 
     if app.disabledDocs.findBy 'slug', @entry.doc.slug
@@ -44,13 +44,15 @@ class app.views.EntryPage extends app.View
     @trigger 'loaded'
     return
 
-  addClipboardLinks: ->
-    unless @clipBoardLink
-      @clipBoardLink = document.createElement('a')
-      @clipBoardLink.className = '_pre-clip'
-      @clipBoardLink.title = 'Copy to clipboard'
-      @clipBoardLink.tabIndex = -1
-    el.appendChild(@clipBoardLink.cloneNode()) for el in @findAllByTag('pre')
+  addCopyButtons: ->
+    unless @copyButton
+      @copyButton = document.createElement('button')
+      @copyButton.innerHTML = '<svg><use xlink:href="#icon-copy"/></svg>'
+      @copyButton.type = 'button'
+      @copyButton.className = '_pre-clip'
+      @copyButton.title = 'Copy to clipboard'
+      @copyButton.setAttribute 'aria-label', 'Copy to clipboard'
+    el.appendChild @copyButton.cloneNode(true) for el in @findAllByTag('pre')
     return
 
   polyfillMathML: ->
diff --git a/assets/stylesheets/application-dark.css.scss b/assets/stylesheets/application-dark.css.scss
index 22c9f1f5..239a4305 100644
--- a/assets/stylesheets/application-dark.css.scss
+++ b/assets/stylesheets/application-dark.css.scss
@@ -1,5 +1,3 @@
-//= depend_on icons.png
-//= depend_on icons@2x.png
 //= depend_on docs-1.png
 //= depend_on docs-1@2x.png
 //= depend_on docs-2.png
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index ac2502b1..ea9fd1b7 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -1,5 +1,3 @@
-//= depend_on icons.png
-//= depend_on icons@2x.png
 //= depend_on docs-1.png
 //= depend_on docs-1@2x.png
 //= depend_on docs-2.png
diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index 97477973..036cda02 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -367,20 +367,21 @@
   pre:hover > & { display: block; }
   &:hover { opacity: 1; }
 
+  > svg { @extend %svg-icon; }
+
   @if $style == 'dark' {
-    &:before { @extend %icon, %icon-clipboard-white; }
+    > svg { fill: white; }
   } @else {
-    &:before { @extend %icon, %icon-clipboard; }
+    > svg { fill: black; }
   }
 
-  &._pre-clip-success, &._pre-clip-error {
-    &:before { display: none; }
-    &:after {
-      content: 'Copied';
-      padding-right: .25rem;
-    }
+  &._pre-clip-success > svg,
+  &._pre-clip-error > svg {
+    display: none;
   }
-  &._pre-clip-error:after { content: 'Error'; }
+
+  &._pre-clip-success:before { content: 'Copied'; }
+  &._pre-clip-error:before { content: 'Error'; }
 }
 
 ._btn {
diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index df084062..37f9268d 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/assets/stylesheets/components/_header.scss
@@ -46,12 +46,9 @@
   }
 
   > svg {
-    display: inline-block;
-    vertical-align: top;
     width: 1.5rem;
     height: 1.5rem;
-    fill: currentColor;
-    pointer-events: none;
+    @extend %svg-icon;
   }
 }
 
@@ -144,17 +141,20 @@
   padding: .5rem 0 .5rem .5rem;
   @extend %border-box;
 
-  &:before {
+  > svg {
     position: absolute;
     z-index: 1;
-    top: calc(1rem - 1px);
-    left: 1rem;
-    opacity: .4;
-    pointer-events: none;
+    top: .875rem;
+    left: .875rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    opacity: .42;
+    @extend %svg-icon;
+
     @if $style == 'dark' {
-      @extend %icon, %icon-search-white;
+      fill: white;
     } @else {
-      @extend %icon, %icon-search;
+      fill: black;
     }
   }
 }
@@ -190,24 +190,24 @@
   position: absolute;
   top: .5em;
   right: 0;
-  width: 2rem;
+  width: 1.75rem;
   height: 2rem;
-  opacity: .3;
+  opacity: .42;
   @extend %hide-text;
 
-  &:hover { opacity: .5; }
+  &:hover { opacity: .7; }
 
-  &:before {
+  > svg {
     position: absolute;
     top: .5rem;
-    left: .5rem;
-    @extend %icon;
+    left: .375rem;
+    @extend %svg-icon;
   }
 
   @if $style == 'dark' {
-    &:before { @extend %icon-close-white; }
+    > svg { fill: white; }
   } @else {
-    &:before { @extend %icon-clear; }
+    > svg { fill: black; }
   }
   ._search-active > & { display: block; }
 }
diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss
index ba2d29e9..0663b4a2 100644
--- a/assets/stylesheets/components/_mobile.scss
+++ b/assets/stylesheets/components/_mobile.scss
@@ -52,10 +52,11 @@
     padding-right: .125rem;
     padding-left: .125rem;
 
-    &:before { left: .625rem; }
+    > svg { left: .5rem; }
   }
 
   ._search-tag { left: .5rem; }
+  ._search-clear > svg { left: .25rem; }
 
   // Sidebar
 
diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss
index 5a32948a..a47d396d 100644
--- a/assets/stylesheets/components/_notif.scss
+++ b/assets/stylesheets/components/_notif.scss
@@ -49,11 +49,12 @@
   opacity: .9;
   @extend %hide-text;
 
-  &:before {
+  > svg {
     position: absolute;
     top: .625rem;
     left: .625rem;
-    @extend %icon, %icon-close-white;
+    fill: white;
+    @extend %svg-icon;
   }
 
   &:hover { opacity: 1; }
diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss
index 077416ea..8afb5a3f 100644
--- a/assets/stylesheets/components/_settings.scss
+++ b/assets/stylesheets/components/_settings.scss
@@ -91,13 +91,10 @@
   @extend %border-box;
 
   > svg {
-    display: inline-block;
-    vertical-align: top;
     width: 1.5rem;
     height: 1.5rem;
     margin-right: .125rem;
-    fill: currentColor;
-    pointer-events: none;
+    @extend %svg-icon;
   }
 }
 
diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss
index b48d541b..f96f617b 100644
--- a/assets/stylesheets/global/_classes.scss
+++ b/assets/stylesheets/global/_classes.scss
@@ -139,15 +139,20 @@
 
 %external-link {
   &:after {
+    content: '';
     display: inline-block;
-    width: .5rem;
-    height: .4375rem;
-    margin: .125rem 0 0 .0625rem;
     vertical-align: top;
+    width: .5rem;
+    height: .5rem;
+    margin: .125rem 0 0 .125rem;
+    background-size: .5rem .5rem;
+    pointer-events: none;
+
+    // <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15,15H2V6h2.595c0,0,0.689-0.896,2.17-2H1C0.447,4,0,4.449,0,5v11c0,0.553,0.447,1,1,1h15c0.553,0,1-0.447,1-1v-3.746 l-2,1.645V15z M13.361,8.05v3.551L20,6.4l-6.639-4.999v3.131C5.3,4.532,5.3,12.5,5.3,12.5C7.582,8.752,8.986,8.05,13.361,8.05z"/></svg>
     @if $style == 'dark' {
-      @extend %icon, %icon-link-white;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
     } @else {
-      @extend %icon, %icon-link;
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
     }
   }
 }
diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss
index c2c62f3d..fffc7e25 100644
--- a/assets/stylesheets/global/_icons.scss
+++ b/assets/stylesheets/global/_icons.scss
@@ -1,10 +1,10 @@
-%icon {
-  content: '';
-  display: block;
+%svg-icon {
+  display: inline-block;
+  vertical-align: top;
   width: 1rem;
   height: 1rem;
-  background-image: image-url('icons.png');
-  background-size: 4rem 2rem;
+  pointer-events: none;
+  fill: currentColor;
 }
 
 %doc-icon {
@@ -16,12 +16,9 @@
   background-size: 10rem 10rem;
 }
 
-%doc-icon-2 {
-  background-image: image-url('docs-2.png') !important;
-}
+%doc-icon-2 { background-image: image-url('docs-2.png') !important; }
 
 @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-  %icon { background-image: image-url('icons@2x.png'); }
   %doc-icon { background-image: image-url('docs-1@2x.png'); }
   %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
 }
@@ -33,15 +30,6 @@
   }
 }
 
-%icon-clipboard             { background-position: 0 0; }
-%icon-search                { background-position: -1rem 0; }
-%icon-link                  { background-position: -2.25rem -.25rem; }
-%icon-clear                 { background-position: -3rem 0; }
-%icon-clipboard-white       { background-position: 0 -1rem; }
-%icon-search-white          { background-position: -1rem -1rem; }
-%icon-close-white           { background-position: -2rem -1rem; }
-%icon-link-white            { background-position: -3.25rem -1.25rem; }
-
 ._icon-jest:before          { background-position: 0 0; }
 ._icon-liquid:before        { background-position: -1rem 0; }
 ._icon-openjdk:before       { background-position: -2rem 0; }
diff --git a/lib/app.rb b/lib/app.rb
index d0b04450..f295da89 100644
--- a/lib/app.rb
+++ b/lib/app.rb
@@ -190,8 +190,6 @@ class App < Sinatra::Application
         javascript_path('application', asset_host: false),
         stylesheet_path('application'),
         stylesheet_path('application-dark'),
-        image_path('icons.png'),
-        image_path('icons@2x.png'),
         image_path('docs-1.png'),
         image_path('docs-1@2x.png'),
         image_path('docs-2.png'),
diff --git a/public/icons/ui/clear/SOURCE b/public/icons/ui/clear/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/clear/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/clear/clear.png b/public/icons/ui/clear/clear.png
deleted file mode 100644
index 86cc57cc9bcaa7a41495a95f49a9a4badbb9097c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 305
zcmV-10nYx3P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002^Nkl<ZI1#0i
zNe;p=3`JXRfPh6W1Qjac7`<Ux!8I5J>mGq&Q{E48l%iB(i1a1L{@+8Kyz9E`pELSL
z?6m422F@JRpaHFiZ29t->$;B}5DKsZnk$8^I6aMB2&l4&57<{=N$%Kte^-*wNoXIZ
zT9iQI377*Vxq&4Z14~ke!okS04Fn}nwMu@Dk}SMkVJoIU6Li6NJ(z;MBnh$Nt?7o=
zXo=vu^L{r!<@_4)XjLL=?lP*p@^<NC;v`3~M?6880h?KKufY@?ff6JiF<#>Zl0BFN
z4{!#u(`)o?7M>tt3d0{MdW)~Vving~`}qv5@#BO~*lrM<nmK3O00000NkvXXu0mjf
D{)T`m

diff --git a/public/icons/ui/clear/clear@2x.png b/public/icons/ui/clear/clear@2x.png
deleted file mode 100644
index 438b02bb428f314e33bde5de862dae14bb209945..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 588
zcmV-S0<-;zP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80006LNkl<ZSPAV`
zOG*Pl6m-NxxQY{!h~hoOg<xEH13xI)1i|~{1nz`fC73Aw*8#s6t7KZ9mF}6Ih|DGp
z#q@O7t5^M<NhXuYLX~B)%H+&FH?UM@36dmfg1-Z70d-&*V0i$Bzy)xQeKo){u5c3;
z0ZJ**13m%n+B}d$?n;p^`(u)~AvP{Z>NCWcc9Dr(0}$u{F{AbwU>jpQc_xAe5Xh1L
zCAl+2jo?gp4Im%|blP9hb_84kPF$Zi=-UULg+r|s-%NxIa1&Ya7rbv%0Hp@_OkAVA
zk#ROrR};M`0|?|%<Fr`=hc*~}YT^oQb>SR{1~r?O!}`<=fYg;h8o32pHW=^D#1QpV
z`dV3x9R%xL%L^IkgQ$Ug51FW0QSd^^snNIGkOAIeJ_BA8R<IyB;|G=>GN8L(%}mY2
zw^07boyJ%V%<?s)Sg7Rn`D4@(Sb0nEbJR30n}r7A$#EmrXVemeHsJ`udepe#R;?Lw
zfDxd{`5v_ieaCQ!;LuUKL*JU1NYTa^H4$|TeHYP*B+#RFk7Vn@ITizP7ZF8J^eTQw
z+g{eE$=xU)!P&?-yQsebu8+^St2h%#5unHM18rvjkD(Q|^(XY50-C(s$0##V-RGDF
zG85JPkQfuy{gN3IDb|%6lRMe2xvx$RxxbFB)6!?chS>5SzvZP2#2PKbo8@CvM!%3d
aH}C}*(YTC)SiRQ(0000<MNUMnLSTYEX$AcN

diff --git a/public/icons/ui/clipboard-white/16.png b/public/icons/ui/clipboard-white/16.png
deleted file mode 100644
index f61a28eb6d13b6adccac906badb0b9c5476eb3e2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6;yhg(Ln;`1&mCnvpuod=fhWLn
z6Q6V1>R&GVm+tty!$IVe!iO670N%1Q_iuh?aen+}sbi#OgQ)y}9d7Ow3YsT=O9?Av
z3or3wzM5+#drB>Yd&@B{iL3t44l%iLUY;SY<ghK9v*8^d&?W{?S3j3^P6<r_{`oV?

diff --git a/public/icons/ui/clipboard-white/16@2x.png b/public/icons/ui/clipboard-white/16@2x.png
deleted file mode 100644
index 2cf04855a0c11ed77dc8a6bc110a4c10ad8bca0f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 229
zcmV<B02=>^P)<h;3K|Lk000e1NJLTq0018V0018d1ONa4wWr>)00022Nkl<ZcmchY
zWfH<L7zJ_oUk=oJ;d-*lLD0XPU~zjxCVXVV)@5H~Z7UI=!-B(UTG07L-g9Sf4qymO
zsh_4P(6{Papnln_18d*y2_^63k866RB)MPn+~SBXRll>OQE@<nB{v+p${OI)J;c*1
zUlLE}1OL<AkOt_aU@E-Is(5sj{kpT*Zd5nP;3<579$xtHrn7aNU>!C>z@Swk>LnIR
f)w_lO`Ar-FcZbvPho`RA00000NkvXXu0mjfB}!z}

diff --git a/public/icons/ui/clipboard-white/SOURCE b/public/icons/ui/clipboard-white/SOURCE
deleted file mode 100644
index 57116488..00000000
--- a/public/icons/ui/clipboard-white/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-https://github.com/github/octicons/blob/master/svg/clippy.svg
diff --git a/public/icons/ui/clipboard/16.png b/public/icons/ui/clipboard/16.png
deleted file mode 100644
index a2d7f8ddccd45a835968b367e039e4c3123f0fa3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6;yhg(Ln;`P9he^Rh&KkzVN|y`
ze1N+p-9UAj!5{X+ni)0{48=bKw|r<mD!^r+xQj`L!IyEFU5%Q>1EYhCT7Tu+a}6?6
yI?|Z(SOXf4bIssuQTF6&*Sv8^P{T`xfkC-C_*~wldxAil7(8A5T-G@yGywn%2`w1_

diff --git a/public/icons/ui/clipboard/16@2x.png b/public/icons/ui/clipboard/16@2x.png
deleted file mode 100644
index 1b24a228475d153f731dc0aee9b7dc15f14ce774..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 230
zcmV<C02%*@P)<h;3K|Lk000e1NJLTq0018V0018d1ONa4wWr>)00023Nkl<ZcmcJQ
z#kB%K5CH2Na9;x2yx`*y84?J3C4y#f=*Re*s$);B3ngeV<!GGJN{J81%|rYKdI%$a
zj3b0Dk?atY8u&rj;GtrLyt&|xo~)?26R@QEFjd?KGk&r0%j~|+mjB}7*Pe%4CJ&@s
z9&n%~b31iTUL$b_uVbAA=Ozxw?T2kw<&m-24?aK7IQYy<mv`gt#y&R6jE7cHFkc}N
gu28hYH=utLCp|D(UFGD-Pyhe`07*qoM6N<$f)(9h_5c6?

diff --git a/public/icons/ui/clipboard/SOURCE b/public/icons/ui/clipboard/SOURCE
deleted file mode 100644
index 57116488..00000000
--- a/public/icons/ui/clipboard/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-https://github.com/github/octicons/blob/master/svg/clippy.svg
diff --git a/public/icons/ui/close-white/SOURCE b/public/icons/ui/close-white/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/close-white/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/close-white/close-white.png b/public/icons/ui/close-white/close-white.png
deleted file mode 100644
index d007befcd38cc67eb3e10a8a56a3eff27796e0e4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkQ1G;;
zi(`mI@6pM&e1{BpT4nPZ8XCE$a)}o9+%xcbD)oosncTuDPm>ET27B%*IWS4}_{Zvh
z-b@L_DTds06*<zvW=EQAzGk{h|Bnmvs^|wkaZ>$1lSE`#YFMopza4P(aOzqh_JK=d
z&J)%*jY}t7(QKNWvieRqgY|ap{mdPjO=TfPs^whAl6g<86TE)Ma%by{H?jd<&zf&9
z<uSW?$l!?ehKZZ1A8@Q`ynRKWwD)}A`TPeD%gTBWJ7=9Z{lxi_SJwN@rM>UCAOAS8
czy2|Mk+o^N`-<=+ptl%2UHx3vIVCg!0JXYsO8@`>

diff --git a/public/icons/ui/close-white/close-white@2x.png b/public/icons/ui/close-white/close-white@2x.png
deleted file mode 100644
index 2fbfa4a8b4bc6dce36b51af7ba38d7705c26a559..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 508
zcmV<Y0R#StP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkPu1Q2eR9J=WmrG6pK@f(2jE8WA5W#3XggfKHL|l0TAJMoWCf<h=
zxHIu6fCTY@u1S1`&xJ)YHr+ElKr$OE=>=U?|Nl=vs*4h!B5kQq_J0AAmUG6}B<)Mu
zl~k3qV)H{uJxMo`t|fJ%5rLRd0b0PAY#UqbY7BM^c>@?l5W6<A+_?l?M1FP1#)dJI
zfX1BUNfE)7NZWIF**}0&;4X#i0XPEQocR%fGZ7Ndasb|eJ@b_VBJP1Ti`nsrXvGSs
zF}?IBPK+y}4^*9)V+Uhw*qH*Fp09fZ>H!fwezz>?t6Pq1%@_f<p2Rc}<w$Z2J5xX>
zkQ@>bOO9b@3dkxtArV>R81|pMSstUb1|oNJ;S(@Si62PXmelt6+U6Ui<WFJy1oQ&Q
zeIw{5=IWBx6TiC_(+^-wV|(_}cMW@lui6u^;rJ?+<66`;^cAA>j05)!Y&tP#4n}k#
z@|EH*;4nZwu@_*=Vh(^$#~)paCrjvF$8X>&Kt8co;L<~$`!Ny)KgW|%XhV`*iNad4
y<eA9Zl)Bf}J4%qNdM>;z&nsZzR`@@oe*r(Tm0fDew*fT(0000<MNUMnLSTX%#MQq5

diff --git a/public/icons/ui/link-white/SOURCE b/public/icons/ui/link-white/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/link-white/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/link-white/link-white.png b/public/icons/ui/link-white/link-white.png
deleted file mode 100644
index a26fd06244461d257d2bb69633f3b5d284597c53..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 143
zcmeAS@N?(olHy`uVBq!ia0vp^96-#@!2%@b2OPNyq{2L1978ywlM@=6|4;q@)Zt3!
z|LOm4{}KNg|L6a;|Ih!QmG~F`<NWt{p%X0)M|u9AX9(T;zyI&~-}OiT|NHMFz-YZe
tlFdPnIf5bYjgG*_Xa9pO?wmisz_85AhVjj-EFYi^44$rjF6*2UngFskJ%9iJ

diff --git a/public/icons/ui/link-white/link-white@2x.png b/public/icons/ui/link-white/link-white@2x.png
deleted file mode 100644
index 97bd1ce5ada405eaa7bf255bee9bef19f06ea198..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 233
zcmV<F02cp=P)<h;3K|Lk000e1NJLTq000mG000gM1ONa4j3!h800026Nkl<ZcmaLS
zu`0!30LI}rq?0oJ2a~c{U4bmhBByf=lF^{#9>jbyoXsGs3os}pH()gw+yLr$)K_0$
z>C5}9zvWGDc1=VPJqLcA)!^K1F*8W9<QU8>OU%KiZ4qNHzSKP!f*TvwL|ps3`(P@?
zk-9nH(a?gCcW+K@S~UiDM$&?bSL^i!t}KWaxUeM(`%a{2fgPzVidfNtjy;$E2j8YO
j`0(7J22c8%I~4f^Npvm6_K}Y}00000NkvXXu0mjfO(9?J

diff --git a/public/icons/ui/link/SOURCE b/public/icons/ui/link/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/link/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/link/link.png b/public/icons/ui/link/link.png
deleted file mode 100644
index 3f252756e281031fe8caeea515c30f487269ced2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 230
zcmeAS@N?(olHy`uVBq!ia0vp^96-#@!3HEvBYEP06lZ})WHAE+w=f7ZGR&GI0Ti6!
z>Eal|F*CK#kndoDg!}#P`K?P5%{rBDc&My<z#)6|fQDga6uZIh#_Ejh4UtFQF_~TZ
zmVU`G{?j&d8<mgxp4(Kd_*D{*++<ZgaA(q?{g3xLr*JRmPJY*HHRaxvYw8C=%~NXY
zLbeqpw3a;<U%KDz)`fLdGyD!TW(hgXiB&ylH}@)kpq0|3$u6=c?w=Q{)Ffnh{#$aA
b`2qK-z!*E<DSJwRZe;Lu^>bP0l+XkKUkg;5

diff --git a/public/icons/ui/link/link@2x.png b/public/icons/ui/link/link@2x.png
deleted file mode 100644
index 47757526c9da4cffdb6cbd6766aff07624a8a505..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 439
zcmV;o0Z9IdP)<h;3K|Lk000e1NJLTq000mG000gM1^@s6CNG?d00009a7bBm000XU
z000XU0RWnu7ytkPX-PyuR49>+kTFYJVHky<_w%L(Md{EVp`}ZOYRupgTEs~dJ9ZK~
zixr7U2sg<O$kxF{x^!tBM4Us08$=5I2?e`2WD2Dy<~t51@rG+K?{?06&f#!O662gz
zF5crbqhjVH&bzVP0CcC2epoF!7z(Bu<$<>YM*2q(d{KU}JrISB0GHkdeeH>k@h?BC
z{QB0YMBP}E8=O9<kZl53t+fu65O07NLxn_>)Wk*rIE?Rf?U0oH*WuDNfK{U-u<g;K
zu)>}H7WC3ODrf!-e%02_6J}3*GZB$;pAsWl*hm8*@E6#}{2Y^h7GpD}`iX9G$}hHq
zM74?Z8d3)r<WzWfHLz47VFpmgXZBRa10(}HS)`9DJ(?fRdC;y(%k?2P5#TseIr}@o
z&tIMQ%@+Qe8X2HsrjalM+S=*@Sgo~+-PT4oc<#h0#&jR{HqeGuS_@+Z7^yf6fD5oC
hj8|iJ@L-pHa1U<YdjAm6z#RYp002ovPDHLkV1h@xx4-}Z

diff --git a/public/icons/ui/search-white/SOURCE b/public/icons/ui/search-white/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/search-white/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/search-white/search-white.png b/public/icons/ui/search-white/search-white.png
deleted file mode 100644
index 758df5a63982d6f71a97d1281df24faa3fae4556..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 248
zcmV<U00;kxP)<h;3K|Lk000e1NJLTq000mG000mO1ONa4wfZ;e0002LNkl<ZC>4#t
zu}T5~7y#g(rk0=xq+Y;>Xb7Sg2y|;GYHg@@Xs)JQZ0`+15M0_Ukk%GO!r`Dnp&-z&
zPSCp(B)>0WHA-qaM%r#|#Uh6i^t24{VL$SeBtBJQ%Bi8mPGsEUDCSh~7#SV!QJ^h}
zjFG1(P{(e}c+raj4HN4z;|9kur|ipfWNhjis>YPEH(W=aJp;UY(C{rab`p8E)phZs
y=}v0wEEd_Y7JpnxO`OLvE~WahoC{qC@xNbVQ=Id+Z5_S<0000<MNUMnLSTaT!e+t%

diff --git a/public/icons/ui/search-white/search-white@2x.png b/public/icons/ui/search-white/search-white@2x.png
deleted file mode 100644
index e8d4f9fba0681241a7ba44b1ce06c9d35b7904f0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 465
zcmV;?0WSWDP)<h;3K|Lk000e1NJLTq001BW001Be1ONa4*>kdg0004)Nkl<ZNDa-w
zze|*H0LSr<S4MQgVPq)==MW7x6a_+9C?+aFL$o*qmp`_$Acvep2yt+A@PCNIAqWRs
z&RRWAIH|CUCXH&59@C?H-tpzj^&CFW_px*G^^%Sq+L&OO5*|BzBuj>r{ufQmvCBa}
zc}}AaN1An9R%uZ@(ri<eXP#$FvcPAmzHm`)Bq?AOxUCvI;44<1Cb=++^_rv(poRBX
zi;6}o9>yAH6oC{)j6Yma6dq&vbjg8hR4^75g*O=Q6oXe7TQn$)62`P*FpSlqFg%PA
z#o#K|O@*<8F|HU~!s=BRpD<<>gKn&}!pLG26oVHS`y>=b25U$TBq(C!6onK&Fg7`>
zNIb#1uV_5Q%8^nC{gg2_Nhlg8d5g8d4b|WT6O^%j(IXd{`GDoK#6zxgnOjV;K`oCy
zxp0mghufuJE}Y^e9$_VX0>2rQ8|}=Hr|KJ7?$E$EK7l>%Djuilpp&HjVGN(ZKKE2F
zM)3)h8Bo0#p+caj`tgVgRm(aGGE^{%T+q=l%y(8euVdmbThLGvZ_ipI00000NkvXX
Hu0mjf<8i<%

diff --git a/public/icons/ui/search/SOURCE b/public/icons/ui/search/SOURCE
deleted file mode 100644
index ffa79609..00000000
--- a/public/icons/ui/search/SOURCE
+++ /dev/null
@@ -1 +0,0 @@
-http://www.entypo.com/
diff --git a/public/icons/ui/search/search.png b/public/icons/ui/search/search.png
deleted file mode 100644
index 504839454755749fadc0f29029a328547ee14bbb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 371
zcmV-(0gV2MP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0003xNkl<ZI1#0h
zK`Vtp6ozN+UXk04g_W}K6D*Yc0maUO*jn%(tg&)8?EM9$Z0v68vJ;D|n=Eco6s7n)
z?=+{*H=!`~H0PZ6oOkA%FIH6*{<9i>IL6q5Hgw?`I<N~PzONSR2Kg5A2m{cSZs8Q}
zbAHD@YrTHA;T8=Vet^YVLkO$Xo<RDT*A$z<KB7)uC>v4}rddBKbu;MFa9xT%NAJME
z*A&|$P9omGPwN7)$%BsjCNsFAIPHZm;t6W{%*UFhYp`}e!E$-UtWTl6z*(u=8w?}%
zL9e~!o5(eM2|8fgYsuUSh%;dS{has^j^PzFEZ$+oW@-j031O6m1L%PU-rxlGa&9JT
zW|BU^62CJr1P!YZZ#k0>;&o}?8rY!U8QOFv{a+iTfe<z@>A{@xn2Y3pTc7P@Ym%_T
RPVN8z002ovPDHLkV1gRjsFDBx

diff --git a/public/icons/ui/search/search@2x.png b/public/icons/ui/search/search@2x.png
deleted file mode 100644
index ca48bca91e4fd64fa35b1b8a74ac773d3bd3e1d4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 774
zcmV+h1Nr=kP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80008bNkl<ZSP8|K
zIcrrx7>0A>iU|b87{$V+5Ya{ytQ0|myM<_BAq1DsrLeLTMEnbO{s0k0!9rpawXkuI
zT8Ik~RMbLnN4-Apg}J<$J9Ey-g=;=|m~Upj?aZ8+dv2{>uXjzRbWdh-<(^trK&@6=
zfX!am0n1<j{=i#!3|HVXEBTpr;-W1`L8M+d3*SKdRKzFdPr$TPtfH}8@<jxDSduhV
z&`o^$ixS3jH4V71<Vt=AwA3#5=?udg(AF)1ZLkzvUeQ@kT-lY2SA=yBJOF<>^%XF;
zT6>s(9r@g&-<$LC@o_<MIuixDO25Y)QaU#Ma69rnm$Hq=ng!rIAHG_UyXdoGhg=`q
zJ{UFs-{>oI_F>!$IAYF!(boo}sx3aNKu0ueVd*M(0oTm&R@J1j9WgFg9NiU-7d^HM
zeZL8pV;tmqP}*oOnvb?srz$I6fFHZDtVj98)5t_OX;!=d?Ol*5L20Aai|jJPJF)Hs
zyt7GNGVO}5q++}*3giVmGQ*vwPgGrJ4!_Wgw==wr7!E-=K5DmyxvDKbdLX|GM#_Bs
z80sSV2%(7Q=yS>f_&oMU&0leL`+Q1o7NAMwcoblSeqYKl9>Z=BwB-H(-LYNVj|<SR
z+zkt&U{7F8>=^pY>BJlZPcFYNup!vx+HnQQ2$>DfAUug$UCozZKdc6Q8R=y^2`bQS
zUDuJ^m`mQsmzu<BE@=5ZSi8Eus0LGcvIR6Iy1J(0cpCH+Rg%BJPAiqN{m%H7R1qy(
z5F6pR5Ke(UGUDLx8Pnar32JZ{az*@LZhK4oc%Z0HfSIruRzUJYh4Dj>E8-_}yF5qf
z3b=7qog@bfiqL7<9Ab5(00l=5fPb9$_Kk)Dbai$_NN}FOVLRd+W6gn3NvB#84S}zO
zek%q-zK(4{NT3$k2OnS<=J{O99}^7zt90xgsQMKD07`&mTzGm37ytkO07*qoM6N<$
Ef{q<v$p8QV

diff --git a/views/app.erb b/views/app.erb
index a7357a59..b5803b6f 100644
--- a/views/app.erb
+++ b/views/app.erb
@@ -1,21 +1,22 @@
 <div class="_app" role="application">
   <header class="_header" role="banner">
     <button type="button" aria-label="Toggle navigation" class="_header-btn" data-toggle-sidebar hidden>
-      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
     </button>
     <form class="_search" role="search">
+      <svg><use xlink:href="#icon-search"/></svg>
       <input type="search" name="q" class="_search-input" placeholder="Search&hellip;" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" maxlength="30" aria-label="Search">
-      <button type="reset" class="_search-clear" title="Clear search">Clear search</button>
+      <button type="reset" class="_search-clear" title="Clear search"><svg><use xlink:href="#icon-close"/></svg>Clear search</button>
       <div class="_search-tag"></div>
     </form>
     <button type="button" aria-label="Back" class="_header-btn" data-back hidden>
-      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
     </button>
     <button type="button" aria-label="Forward" class="_header-btn _forward-btn" data-forward hidden>
-      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
     </button>
     <button type="button" aria-label="Toggle menu" title="Toggle menu" class="_header-btn _menu-btn" data-toggle-menu>
-      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
+      <svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
     </button>
     <nav class="_menu" role="navigation">
       <h1 class="_menu-title"><a href="/" class="_menu-title-link">DevDocs</a></h1>
@@ -41,10 +42,10 @@
   <form class="_settings" id="settings">
     <div class="_header">
       <button type="button" aria-label="Back" class="_settings-btn _settings-btn-back" data-back>
-        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg> Back
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> Back
       </button>
       <button type="submit" class="_settings-btn _settings-btn-save">
-        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Apply
+        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Apply
       </button>
       <nav class="_settings-tabs">
         <button type="button" class="_settings-tab active" data-tab="doc-picker" hidden>Docs</button><button type="button" class="_settings-tab" data-tab="settings" hidden>Settings</button>
@@ -53,8 +54,14 @@
     <div class="_sidebar" tabindex="-1"></div>
   </form>
 </div>
-<svg style="display:none">
-  <symbol id="dir-icon"><svg viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></svg></symbol>
+<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="icon-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></symbol>
+    <symbol id="icon-dir" viewBox="0 0 20 20"><path d="M15 10c0 .3-.305.515-.305.515l-8.56 5.303c-.625.41-1.135.106-1.135-.67V4.853c0-.777.51-1.078 1.135-.67l8.56 5.305S15 9.702 15 10z"/></symbol>
+    <symbol id="icon-close" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol>
+    <symbol id="icon-copy" viewBox="0 0 14 16"><path d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"/></symbol>
+    <symbol id="icon-external-link" viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></symbol>
+  </defs>
 </svg>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }