Use an SVG icon for "dir" and "path" icons

assets/javascripts/templates/path_tmpl.coffee

@@ -1,5 +1,7 @@
+arrow = """<svg class="_path-arrow"><use xlink:href="#dir"/></svg>"""
+
 app.templates.path = (doc, type, entry) ->
   html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.icon}">#{doc.fullName}</a>"""
-  html += """<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
+  html += """#{arrow}<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
-  html += """<span class="_path-item">#{$.escape entry.name}</span>""" if entry
+  html += """#{arrow}<span class="_path-item">#{$.escape entry.name}</span>""" if entry
   html

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -1,5 +1,7 @@
 templates = app.templates
 
+arrow = """<svg class="_list-arrow"><use xlink:href="#dir"/></svg>"""
+
 templates.sidebarDoc = (doc, options = {}) ->
   link  = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
   link += if options.disabled then '_list-disabled' else '_list-dir'
@@ -7,14 +9,14 @@ templates.sidebarDoc = (doc, options = {}) ->
   if options.disabled
     link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
   else
-    link += """<span class="_list-arrow"></span>"""
+    link += arrow
   link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
   link += """<span class="_list-text">#{doc.name}"""
   link += " #{doc.version}" if options.fullName or options.disabled and doc.version
   link + "</span></a>"
 
 templates.sidebarType = (type) ->
-  """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}" tabindex="-1"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span><span class="_list-text">#{$.escape type.name}</span></a>"""
+  """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}" tabindex="-1">#{arrow}<span class="_list-count">#{type.count}</span><span class="_list-text">#{$.escape type.name}</span></a>"""
 
 templates.sidebarEntry = (entry) ->
   """<a href="#{entry.fullPath()}" class="_list-item _list-hover" tabindex="-1">#{$.escape entry.name}</a>"""
@@ -47,16 +49,16 @@ templates.sidebarLabel = (doc, options = {}) ->
 templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
   html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
   html += " open" if options.open
-  html + """" tabindex="0"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
+  html + """" tabindex="0">#{arrow}#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
 
 templates.sidebarDisabled = (options) ->
-  """<h6 class="_list-title"><span class="_list-arrow"></span>Disabled (#{options.count})</h6>"""
+  """<h6 class="_list-title">#{arrow}Disabled (#{options.count})</h6>"""
 
 templates.sidebarDisabledList = (html) ->
   """<div class="_disabled-list">#{html}</div>"""
 
 templates.sidebarDisabledVersionedDoc = (doc, versions) ->
-  """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1"><span class="_list-arrow"></span>#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
+  """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1">#{arrow}#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
 
 templates.docPickerNote = """
   <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>

assets/javascripts/views/list/list_fold.coffee

@@ -55,6 +55,7 @@ class app.views.ListFold extends app.View
     return if event.which isnt 1 or event.metaKey or event.ctrlKey
     return unless event.pageY # ignore fabricated clicks
     el = event.target
+    el = el.parentElement if el.parentElement.tagName.toUpperCase() is 'SVG'
 
     if el.classList.contains @constructor.handleClass
       $.stopEvent(event)

assets/stylesheets/components/_path.scss

@@ -23,7 +23,6 @@
   position: relative;
   display: inline-block;
   vertical-align: top;
-  margin: 0 1rem 0 0;
   padding: 0 .375rem;
   color: $textColor;
   text-decoration: none;
@@ -36,16 +35,13 @@
     margin: .5rem .375rem 0 0;
     @extend %doc-icon;
   }
+}
 
-  & + &:after {
+._path-arrow {
-    content: '';
+  display: inline-block;
-    position: absolute;
+  vertical-align: top;
-    top: 50%;
+  width: .75rem;
-    right: 100%;
+  height: .75rem;
-    width: 1rem;
+  margin: .625rem .25rem;
-    height: 1rem;
+  fill: #888;
-    margin: -.5rem 0 0 0;
-    pointer-events: none;
-    @extend %icon, %icon-path;
-  }
 }

assets/stylesheets/components/_sidebar.scss

@@ -162,7 +162,7 @@
 
 ._list-dir:not(._list-rdir),
 %_list-dir {
-  padding-left: 2.25rem;
+  padding-left: 2.125rem;
 }
 
 ._list-disabled {
@@ -176,10 +176,15 @@
   position: absolute;
   top: 0;
   left: .25rem;
-  padding: .5rem;
+  padding: .5rem .375rem .5rem .5rem;
+  width: 1rem;
+  height: 1rem;
   cursor: pointer;
+  fill: black;
   opacity: .4;
 
+  @if $style == 'dark' { fill: white; }
+
   &:hover { opacity: .65; }
 
   ._list-rdir > & {
@@ -187,18 +192,10 @@
     right: .25rem;
   }
 
-  &:before {
-    @if $style == 'dark' {
-      @extend %icon, %icon-dir-white;
-    } @else {
-      @extend %icon, %icon-dir;
-    }
-
   .open > &, .open-title > & {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
-  }
 }
 
 ._list-sub {

assets/stylesheets/global/_icons.scss

@@ -4,7 +4,7 @@
   width: 1rem;
   height: 1rem;
   background-image: image-url('icons.png');
-  background-size: 4rem 3rem;
+  background-size: 4rem 2rem;
 }
 
 %doc-icon {
@@ -33,17 +33,14 @@
   }
 }
 
-%icon-dir                   { background-position: 0 0; }
+%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-path                  { background-position: 0 -1rem; }
+%icon-clipboard-white       { background-position: 0 -1rem; }
 %icon-search-white          { background-position: -1rem -1rem; }
-%icon-dir-white             { background-position: -2rem -1rem; }
+%icon-close-white           { background-position: -2rem -1rem; }
 %icon-link-white            { background-position: -3.25rem -1.25rem; }
-%icon-clipboard             { background-position: 0 -2rem; }
-%icon-clipboard-white       { background-position: -1rem -2rem; }
-%icon-close-white           { background-position: -2rem -2rem; }
 
 ._icon-jest:before          { background-position: 0 0; }
 ._icon-liquid:before        { background-position: -1rem 0; }

public/icons/ui/dir-white/SOURCE

@@ -1 +0,0 @@
-http://gemicon.net/

public/icons/ui/dir/SOURCE

@@ -1 +0,0 @@
-http://gemicon.net/

views/app.erb

@@ -30,7 +30,7 @@
     <div class="_list" role="navigation">
       <% unless @doc %>
       <% App.docs.each do |slug, doc| %>
-      <a href="/<%= slug %>/" class="_list-item"><span class="_list-arrow"></span><%= doc['full_name'] %></a>
+      <a href="/<%= slug %>/" class="_list-item"><%= doc['full_name'] %></a>
       <% end %>
       <% end %>
     </div>
@@ -55,6 +55,9 @@
     </div>
   </form>
 </div>
+<svg style="display:none">
+  <symbol id="dir"><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 data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }
   ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }