From 1fb1a9229376b2909fa2a79f3a504b122a60885b Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Mon, 28 Jan 2019 22:03:11 -0800
Subject: [PATCH] fix: change sidebar chevron icon to use svg (#1211)

---
 v1/lib/core/nav/SideNav.js | 12 +++++++++++-
 v1/lib/static/css/main.css |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/v1/lib/core/nav/SideNav.js b/v1/lib/core/nav/SideNav.js
index 21cdb75597..c145ab93a1 100644
--- a/v1/lib/core/nav/SideNav.js
+++ b/v1/lib/core/nav/SideNav.js
@@ -69,7 +69,17 @@ class SideNav extends React.Component {
     if (siteConfig.docsSideNavCollapsible) {
       categoryClassName += ' collapsible';
       ulClassName = 'hide';
-      arrow = <span className="arrow">&#8963;</span>;
+      arrow = (
+        <span className="arrow">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              fill="#565656"
+              d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
+            />
+            <path d="M0 0h24v24H0z" fill="none" />
+          </svg>
+        </span>
+      );
     }
 
     return (
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
index 0a7a57f7ff..739f809777 100644
--- a/v1/lib/static/css/main.css
+++ b/v1/lib/static/css/main.css
@@ -1626,6 +1626,7 @@ input::placeholder {
 .collapsible .arrow {
   float: right;
   margin-right: 8px;
+  margin-top: -4px;
   transform: rotate(90deg);
   transition: transform 200ms linear;
 }