From 80223a5e41e0b9827f18a2e113996cd9b1c6b8ee Mon Sep 17 00:00:00 2001
From: Anton Korzhuk <antonkorzhuk@gmail.com>
Date: Mon, 1 Aug 2022 12:57:51 -0400
Subject: [PATCH] replace inline svgs with svg icon_path (#3332)

---
 docs/images/icons/art-pad.svg      |  1 +
 docs/images/icons/contributing.svg |  1 +
 docs/images/icons/docker.svg       |  1 +
 docs/images/icons/generic.svg      |  1 +
 docs/images/icons/home.svg         |  1 +
 docs/images/icons/layers.svg       |  1 +
 docs/images/icons/picture.svg      |  1 +
 docs/images/icons/protractor.svg   |  1 +
 docs/images/icons/secrets.svg      |  1 +
 docs/images/icons/star.svg         |  1 +
 docs/images/icons/terminal.svg     |  1 +
 docs/images/icons/users.svg        |  1 +
 docs/images/icons/wrench.svg       |  1 +
 docs/manifest.json                 | 26 +++++++++++++-------------
 14 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 docs/images/icons/art-pad.svg
 create mode 100644 docs/images/icons/contributing.svg
 create mode 100644 docs/images/icons/docker.svg
 create mode 100644 docs/images/icons/generic.svg
 create mode 100644 docs/images/icons/home.svg
 create mode 100644 docs/images/icons/layers.svg
 create mode 100644 docs/images/icons/picture.svg
 create mode 100644 docs/images/icons/protractor.svg
 create mode 100644 docs/images/icons/secrets.svg
 create mode 100644 docs/images/icons/star.svg
 create mode 100644 docs/images/icons/terminal.svg
 create mode 100644 docs/images/icons/users.svg
 create mode 100644 docs/images/icons/wrench.svg

diff --git a/docs/images/icons/art-pad.svg b/docs/images/icons/art-pad.svg
new file mode 100644
index 0000000000..19eeaf768a
--- /dev/null
+++ b/docs/images/icons/art-pad.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10c1.38,0,2.5-1.12,2.5-2.5c0-0.61-0.23-1.2-0.64-1.67c-0.08-0.1-0.13-0.21-0.13-0.33 c0-0.28,0.22-0.5,0.5-0.5H16c3.31,0,6-2.69,6-6C22,6.04,17.51,2,12,2z M17.5,13c-0.83,0-1.5-0.67-1.5-1.5c0-0.83,0.67-1.5,1.5-1.5 s1.5,0.67,1.5,1.5C19,12.33,18.33,13,17.5,13z M14.5,9C13.67,9,13,8.33,13,7.5C13,6.67,13.67,6,14.5,6S16,6.67,16,7.5 C16,8.33,15.33,9,14.5,9z M5,11.5C5,10.67,5.67,10,6.5,10S8,10.67,8,11.5C8,12.33,7.33,13,6.5,13S5,12.33,5,11.5z M11,7.5 C11,8.33,10.33,9,9.5,9S8,8.33,8,7.5C8,6.67,8.67,6,9.5,6S11,6.67,11,7.5z"/></g></svg>
diff --git a/docs/images/icons/contributing.svg b/docs/images/icons/contributing.svg
new file mode 100644
index 0000000000..c814591e1c
--- /dev/null
+++ b/docs/images/icons/contributing.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 2.5V12.5" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 7.5C16.3807 7.5 17.5 6.38071 17.5 5C17.5 3.61929 16.3807 2.5 15 2.5C13.6193 2.5 12.5 3.61929 12.5 5C12.5 6.38071 13.6193 7.5 15 7.5Z" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 17.5C6.38071 17.5 7.5 16.3807 7.5 15C7.5 13.6193 6.38071 12.5 5 12.5C3.61929 12.5 2.5 13.6193 2.5 15C2.5 16.3807 3.61929 17.5 5 17.5Z" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/docs/images/icons/docker.svg b/docs/images/icons/docker.svg
new file mode 100644
index 0000000000..befe6f42c4
--- /dev/null
+++ b/docs/images/icons/docker.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg"><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z"/></svg>
diff --git a/docs/images/icons/generic.svg b/docs/images/icons/generic.svg
new file mode 100644
index 0000000000..4a2ab59ecc
--- /dev/null
+++ b/docs/images/icons/generic.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><ellipse cx="16" cy="16" rx="4" ry="3.11" transform="rotate(-30 15.991 16.005)" fill="#ffffff" class="fill-00bbff"></ellipse><ellipse cx="16" cy="16" rx="4" ry="3.11" transform="rotate(-30 15.991 16.005)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="stroke-000000"></ellipse><path d="M29 8.5c1.93 3.35-.18 8.19-4.73 10.82s-9.8 2-11.73-1.32" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="stroke-000000"></path><path d="M17.49 3.06c4.69-.48 8.08 2.78 7.56 7.28a8.47 8.47 0 0 1-.18 1M4.46 11c2.76-3.83 8.27-5.51 12.31-3.76s5.07 6.27 2.31 10.1" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="stroke-000000"></path><path d="M3 23.5c-1.93-3.35.18-8.19 4.73-10.82q.43-.25.86-.45M14.56 28.53C9.86 29 6.47 25.84 7 21.46s4.72-8.32 9.41-8.8" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="stroke-000000"></path><path d="M27.54 21c-2.76 3.83-8.27 5.51-12.31 3.76a7.44 7.44 0 0 1-.72-.36" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="stroke-000000"></path></svg>
diff --git a/docs/images/icons/home.svg b/docs/images/icons/home.svg
new file mode 100644
index 0000000000..5e2dc96ff5
--- /dev/null
+++ b/docs/images/icons/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 16 16" width="16px" xml:space="preserve"><path d="M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555  L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3  c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z"></path></svg>
diff --git a/docs/images/icons/layers.svg b/docs/images/icons/layers.svg
new file mode 100644
index 0000000000..9579a30080
--- /dev/null
+++ b/docs/images/icons/layers.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.6 0.0984375L0.4 3.49844C0.2 3.59844 0.2 3.89844 0.4 3.99844L7.7 7.29844C7.9 7.39844 8.2 7.39844 8.4 7.29844L15.6 3.99844C15.8 3.89844 15.8 3.59844 15.6 3.49844L8.4 0.0984375C8.1 -0.0015625 7.9 -0.0015625 7.6 0.0984375Z" /><path d="M15.6 7.79844L14.1 7.09844C13.9 6.99844 13.6 6.99844 13.4 7.09844L8.3 9.39844C8.1 9.49844 7.8 9.49844 7.6 9.39844L2.6 7.09844C2.3 6.99844 2.1 6.99844 1.9 7.09844L0.4 7.79844C0.2 7.89844 0.2 8.19844 0.4 8.29844L7.7 11.5984C7.9 11.6984 8.2 11.6984 8.4 11.5984L15.7 8.29844C15.8 8.19844 15.8 7.89844 15.6 7.79844Z" /><path d="M15.5984 12.0984L14.0984 11.3984C13.8984 11.2984 13.5984 11.2984 13.3984 11.3984L8.29844 13.6984C8.09844 13.7984 7.79844 13.7984 7.59844 13.6984L2.49844 11.3984C2.29844 11.2984 1.99844 11.2984 1.79844 11.3984L0.298438 12.0984C0.0984375 12.1984 0.0984375 12.4984 0.298438 12.5984L7.59844 15.8984C7.79844 15.9984 8.09844 15.9984 8.29844 15.8984L15.5984 12.5984C15.7984 12.4984 15.7984 12.1984 15.5984 12.0984Z"/></svg>
diff --git a/docs/images/icons/picture.svg b/docs/images/icons/picture.svg
new file mode 100644
index 0000000000..c272605eae
--- /dev/null
+++ b/docs/images/icons/picture.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path d="M15.0017 4.0017H1.0017C0.868289 3.99368 0.734692 4.01405 0.609732 4.06147C0.484772 4.10889 0.371292 4.18228 0.276784 4.27678C0.182276 4.37129 0.108891 4.48477 0.0614728 4.60973C0.0140548 4.73469 -0.00631686 4.86829 0.00170278 5.0017V15.0017C-0.00631686 15.1351 0.0140548 15.2687 0.0614728 15.3937C0.108891 15.5186 0.182276 15.6321 0.276784 15.7266C0.371292 15.8211 0.484772 15.8945 0.609732 15.9419C0.734692 15.9894 0.868289 16.0097 1.0017 16.0017H15.0017C15.1351 16.0097 15.2687 15.9894 15.3937 15.9419C15.5186 15.8945 15.6321 15.8211 15.7266 15.7266C15.8211 15.6321 15.8945 15.5186 15.9419 15.3937C15.9894 15.2687 16.0097 15.1351 16.0017 15.0017V5.0017C16.0097 4.86829 15.9894 4.73469 15.9419 4.60973C15.8945 4.48477 15.8211 4.37129 15.7266 4.27678C15.6321 4.18228 15.5186 4.10889 15.3937 4.06147C15.2687 4.01405 15.1351 3.99368 15.0017 4.0017ZM14.0017 14.0017H2.0017V6.0017H14.0017V14.0017Z" /> <path d="M14 0H2V2H14V0Z" fill="#333333"/> <path d="M5 13L10 8L13 13H5Z" /> <path d="M5 10C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10Z" /> </svg>
diff --git a/docs/images/icons/protractor.svg b/docs/images/icons/protractor.svg
new file mode 100644
index 0000000000..3c6e59c30d
--- /dev/null
+++ b/docs/images/icons/protractor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M6.36,18.78L6.61,21l1.62-1.54l2.77-7.6c-0.68-0.17-1.28-0.51-1.77-0.98L6.36,18.78z"/><path d="M14.77,10.88c-0.49,0.47-1.1,0.81-1.77,0.98l2.77,7.6L17.39,21l0.26-2.22L14.77,10.88z"/><path d="M15,8c0-1.3-0.84-2.4-2-2.82V3h-2v2.18C9.84,5.6,9,6.7,9,8c0,1.66,1.34,3,3,3S15,9.66,15,8z M12,9c-0.55,0-1-0.45-1-1 c0-0.55,0.45-1,1-1s1,0.45,1,1C13,8.55,12.55,9,12,9z"/></g></g></svg>
diff --git a/docs/images/icons/secrets.svg b/docs/images/icons/secrets.svg
new file mode 100644
index 0000000000..fe81c37329
--- /dev/null
+++ b/docs/images/icons/secrets.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
diff --git a/docs/images/icons/star.svg b/docs/images/icons/star.svg
new file mode 100644
index 0000000000..4534593e05
--- /dev/null
+++ b/docs/images/icons/star.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
diff --git a/docs/images/icons/terminal.svg b/docs/images/icons/terminal.svg
new file mode 100644
index 0000000000..1a4db5c847
--- /dev/null
+++ b/docs/images/icons/terminal.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 512 466" xmlns="http://www.w3.org/2000/svg"><path d="M46.5 0.837754C20.5 0.837754 0 22.3052 0 49.5321V122.94V196.348V221.062V245.776V270.489V343.898V417.306C0 444.533 20.5 466 46.5 466H256H465.5C491.5 466 512 444.533 512 417.306V343.898V244.205V195.511V122.102V48.6944C512 21.4674 491.5 0 465.5 0H256H46.5V0.837754Z" /><path d="M70.1 73.1V99.1L140.2 140.1L70.1 181.1V207.1L186.7 140.1L70.1 73.1ZM185.9 186.5V210.1H302.5V186.5H185.9Z" fill="white" /></svg>
diff --git a/docs/images/icons/users.svg b/docs/images/icons/users.svg
new file mode 100644
index 0000000000..cdcde76732
--- /dev/null
+++ b/docs/images/icons/users.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
diff --git a/docs/images/icons/wrench.svg b/docs/images/icons/wrench.svg
new file mode 100644
index 0000000000..b4c9e1dfd8
--- /dev/null
+++ b/docs/images/icons/wrench.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"></path></svg>
diff --git a/docs/manifest.json b/docs/manifest.json
index 2b34994270..23be4a66d8 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -9,12 +9,12 @@
       "title": "About",
       "description": "About Coder",
       "path": "./README.md",
-      "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16px\" xml:space=\"preserve\"><path d=\"M15.45,7L14,5.551V2c0-0.55-0.45-1-1-1h-1c-0.55,0-1,0.45-1,1v0.553L9,0.555C8.727,0.297,8.477,0,8,0S7.273,0.297,7,0.555  L0.55,7C0.238,7.325,0,7.562,0,8c0,0.563,0.432,1,1,1h1v6c0,0.55,0.45,1,1,1h3v-5c0-0.55,0.45-1,1-1h2c0.55,0,1,0.45,1,1v5h3  c0.55,0,1-0.45,1-1V9h1c0.568,0,1-0.437,1-1C16,7.562,15.762,7.325,15.45,7z\"></path></svg>",
+      "icon_path": "./images/icons/home.svg",
       "children": [
         {
           "title": "Architecture",
           "description": "Learn how Coder works",
-          "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><g><rect fill=\"none\" height=\"24\" width=\"24\"\/><\/g><g><g><path d=\"M6.36,18.78L6.61,21l1.62-1.54l2.77-7.6c-0.68-0.17-1.28-0.51-1.77-0.98L6.36,18.78z\"\/><path d=\"M14.77,10.88c-0.49,0.47-1.1,0.81-1.77,0.98l2.77,7.6L17.39,21l0.26-2.22L14.77,10.88z\"\/><path d=\"M15,8c0-1.3-0.84-2.4-2-2.82V3h-2v2.18C9.84,5.6,9,6.7,9,8c0,1.66,1.34,3,3,3S15,9.66,15,8z M12,9c-0.55,0-1-0.45-1-1 c0-0.55,0.45-1,1-1s1,0.45,1,1C13,8.55,12.55,9,12,9z\"\/><\/g><\/g><\/svg>",
+          "icon_path": "./images/icons/protractor.svg",
           "path": "./architecture.md"
         }
       ]
@@ -22,7 +22,7 @@
     {
       "title": "Installation",
       "description": "How to install and deploy Coder",
-      "icon": "<svg class=\"MuiSvgIcon-root jss172\" focusable=\"false\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z\"></path></svg>",
+      "icon_path": "./images/icons/wrench.svg",
       "path": "./install.md",
       "children": [
         {
@@ -35,19 +35,19 @@
     {
       "title": "Quickstart",
       "description": "Create your first template and workspace",
-      "icon": "<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-uqopch\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"></path></svg>",
+      "icon_path": "./images/icons/star.svg",
       "path": "./quickstart.md",
       "children": [
         {
           "title": "Docker",
           "description": "Setup Coder with Docker",
-          "icon": "<?xml version=\"1.0\" ?><svg viewBox=\"0 0 640 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z\"\/><\/svg>",
+          "icon_path": "./images/icons/docker.svg",
           "path": "./quickstart/docker.md"
         },
         {
           "title": "Generic",
           "description": "Setup Coder on anything",
-          "icon": "<svg viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><ellipse cx=\"16\" cy=\"16\" rx=\"4\" ry=\"3.11\" transform=\"rotate(-30 15.991 16.005)\" fill=\"#ffffff\" class=\"fill-00bbff\"><\/ellipse><ellipse cx=\"16\" cy=\"16\" rx=\"4\" ry=\"3.11\" transform=\"rotate(-30 15.991 16.005)\" fill=\"none\" stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2px\" class=\"stroke-000000\"><\/ellipse><path d=\"M29 8.5c1.93 3.35-.18 8.19-4.73 10.82s-9.8 2-11.73-1.32\" fill=\"none\" stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2px\" class=\"stroke-000000\"><\/path><path d=\"M17.49 3.06c4.69-.48 8.08 2.78 7.56 7.28a8.47 8.47 0 0 1-.18 1M4.46 11c2.76-3.83 8.27-5.51 12.31-3.76s5.07 6.27 2.31 10.1\" fill=\"none\" stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2px\" class=\"stroke-000000\"><\/path><path d=\"M3 23.5c-1.93-3.35.18-8.19 4.73-10.82q.43-.25.86-.45M14.56 28.53C9.86 29 6.47 25.84 7 21.46s4.72-8.32 9.41-8.8\" fill=\"none\" stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2px\" class=\"stroke-000000\"><\/path><path d=\"M27.54 21c-2.76 3.83-8.27 5.51-12.31 3.76a7.44 7.44 0 0 1-.72-.36\" fill=\"none\" stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2px\" class=\"stroke-000000\"><\/path><\/svg>",
+          "icon_path": "./images/icons/generic.svg",
           "path": "./quickstart/generic.md"
         }
       ]
@@ -56,7 +56,7 @@
       "title": "Templates",
       "description": "Learn about templates, which define the infrastructure underlying workspaces",
       "path": "./templates.md",
-      "icon": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M15.0017 4.0017H1.0017C0.868289 3.99368 0.734692 4.01405 0.609732 4.06147C0.484772 4.10889 0.371292 4.18228 0.276784 4.27678C0.182276 4.37129 0.108891 4.48477 0.0614728 4.60973C0.0140548 4.73469 -0.00631686 4.86829 0.00170278 5.0017V15.0017C-0.00631686 15.1351 0.0140548 15.2687 0.0614728 15.3937C0.108891 15.5186 0.182276 15.6321 0.276784 15.7266C0.371292 15.8211 0.484772 15.8945 0.609732 15.9419C0.734692 15.9894 0.868289 16.0097 1.0017 16.0017H15.0017C15.1351 16.0097 15.2687 15.9894 15.3937 15.9419C15.5186 15.8945 15.6321 15.8211 15.7266 15.7266C15.8211 15.6321 15.8945 15.5186 15.9419 15.3937C15.9894 15.2687 16.0097 15.1351 16.0017 15.0017V5.0017C16.0097 4.86829 15.9894 4.73469 15.9419 4.60973C15.8945 4.48477 15.8211 4.37129 15.7266 4.27678C15.6321 4.18228 15.5186 4.10889 15.3937 4.06147C15.2687 4.01405 15.1351 3.99368 15.0017 4.0017ZM14.0017 14.0017H2.0017V6.0017H14.0017V14.0017Z\" /> <path d=\"M14 0H2V2H14V0Z\" fill=\"#333333\"/> <path d=\"M5 13L10 8L13 13H5Z\" /> <path d=\"M5 10C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10Z\" /> </svg>",
+      "icon_path": "./images/icons/picture.svg",
       "children": [
         {
           "title": "Provider Authentication",
@@ -68,14 +68,14 @@
     {
       "title": "Workspaces",
       "description": "Learn about Coder workspaces.",
-      "icon": "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.6 0.0984375L0.4 3.49844C0.2 3.59844 0.2 3.89844 0.4 3.99844L7.7 7.29844C7.9 7.39844 8.2 7.39844 8.4 7.29844L15.6 3.99844C15.8 3.89844 15.8 3.59844 15.6 3.49844L8.4 0.0984375C8.1 -0.0015625 7.9 -0.0015625 7.6 0.0984375Z\" />\n<path d=\"M15.6 7.79844L14.1 7.09844C13.9 6.99844 13.6 6.99844 13.4 7.09844L8.3 9.39844C8.1 9.49844 7.8 9.49844 7.6 9.39844L2.6 7.09844C2.3 6.99844 2.1 6.99844 1.9 7.09844L0.4 7.79844C0.2 7.89844 0.2 8.19844 0.4 8.29844L7.7 11.5984C7.9 11.6984 8.2 11.6984 8.4 11.5984L15.7 8.29844C15.8 8.19844 15.8 7.89844 15.6 7.79844Z\" />\n<path d=\"M15.5984 12.0984L14.0984 11.3984C13.8984 11.2984 13.5984 11.2984 13.3984 11.3984L8.29844 13.6984C8.09844 13.7984 7.79844 13.7984 7.59844 13.6984L2.49844 11.3984C2.29844 11.2984 1.99844 11.2984 1.79844 11.3984L0.298438 12.0984C0.0984375 12.1984 0.0984375 12.4984 0.298438 12.5984L7.59844 15.8984C7.79844 15.9984 8.09844 15.9984 8.29844 15.8984L15.5984 12.5984C15.7984 12.4984 15.7984 12.1984 15.5984 12.0984Z\"/></svg>",
+      "icon_path": "./images/icons/layers.svg",
       "path": "./workspaces.md"
     },
     {
       "title": "IDEs",
       "description": "Learn how to use your IDE of choice with Coder",
       "path": "./ides.md",
-      "icon": "<svg viewBox=\"0 0 512 466\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M46.5 0.837754C20.5 0.837754 0 22.3052 0 49.5321V122.94V196.348V221.062V245.776V270.489V343.898V417.306C0 444.533 20.5 466 46.5 466H256H465.5C491.5 466 512 444.533 512 417.306V343.898V244.205V195.511V122.102V48.6944C512 21.4674 491.5 0 465.5 0H256H46.5V0.837754Z\" />\n<path d=\"M70.1 73.1V99.1L140.2 140.1L70.1 181.1V207.1L186.7 140.1L70.1 73.1ZM185.9 186.5V210.1H302.5V186.5H185.9Z\" fill=\"white\" />\n</svg>",
+      "icon_path": "./images/icons/terminal.svg",
       "children": [
         {
           "title": "Configuring Web IDEs",
@@ -92,25 +92,25 @@
     {
       "title": "Dotfiles",
       "description": "Learn how to personalize your workspace",
-      "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><g><rect fill=\"none\" height=\"24\" width=\"24\"\/><\/g><g><path d=\"M12,2C6.49,2,2,6.49,2,12s4.49,10,10,10c1.38,0,2.5-1.12,2.5-2.5c0-0.61-0.23-1.2-0.64-1.67c-0.08-0.1-0.13-0.21-0.13-0.33 c0-0.28,0.22-0.5,0.5-0.5H16c3.31,0,6-2.69,6-6C22,6.04,17.51,2,12,2z M17.5,13c-0.83,0-1.5-0.67-1.5-1.5c0-0.83,0.67-1.5,1.5-1.5 s1.5,0.67,1.5,1.5C19,12.33,18.33,13,17.5,13z M14.5,9C13.67,9,13,8.33,13,7.5C13,6.67,13.67,6,14.5,6S16,6.67,16,7.5 C16,8.33,15.33,9,14.5,9z M5,11.5C5,10.67,5.67,10,6.5,10S8,10.67,8,11.5C8,12.33,7.33,13,6.5,13S5,12.33,5,11.5z M11,7.5 C11,8.33,10.33,9,9.5,9S8,8.33,8,7.5C8,6.67,8.67,6,9.5,6S11,6.67,11,7.5z\"\/><\/g><\/svg>",
+      "icon_path": "./images/icons/art-pad.svg",
       "path": "./dotfiles.md"
     },
     {
       "title": "Secrets",
       "description": "Learn how to use secrets in your worskpace",
-      "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z\" fill=\"none\"\/><path d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\/><\/svg>",
+      "icon_path": "./images/icons/secrets.svg",
       "path": "./secrets.md"
     },
     {
       "title": "User Management",
       "description": "Learn about user roles available in Coder and how to create and manage users",
-      "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"\/><path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/><\/svg>",
+      "icon_path": "./images/icons/users.svg",
       "path": "./users.md"
     },
     {
       "title": "Contributing",
       "description": "Learn how to contribute to Coder",
-      "icon": "<svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5 2.5V12.5\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15 7.5C16.3807 7.5 17.5 6.38071 17.5 5C17.5 3.61929 16.3807 2.5 15 2.5C13.6193 2.5 12.5 3.61929 12.5 5C12.5 6.38071 13.6193 7.5 15 7.5Z\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 17.5C6.38071 17.5 7.5 16.3807 7.5 15C7.5 13.6193 6.38071 12.5 5 12.5C3.61929 12.5 2.5 13.6193 2.5 15C2.5 16.3807 3.61929 17.5 5 17.5Z\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15 7.5C15 9.48912 14.2098 11.3968 12.8033 12.8033C11.3968 14.2098 9.48912 15 7.5 15\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
+      "icon_path": "./images/icons/contributing.svg",
       "path": "./CONTRIBUTING.md",
       "children": [
         {