From 940d2a8b45988bf62cc55beffd05ee7414a16f3f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 25 Sep 2019 17:13:42 +0530
Subject: [PATCH] :lipstick: Updated inline SVGs to Material Icons

---
 assets/css/styles.scss         |   7 +++
 components/history.vue         |  21 +++----
 components/section.vue         |  11 +++-
 components/settings/swatch.vue |   8 +--
 layouts/default.vue            |   6 +-
 pages/index.vue                | 108 +++++++++++----------------------
 pages/websocket.vue            |  12 +---
 7 files changed, 68 insertions(+), 105 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 8dbda9b9..37a687fc 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -136,9 +136,16 @@ fieldset {
 }
 
 legend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--fg-color);
   font-weight: 600;
   cursor: pointer;
+
+  i {
+    margin-left: 8px;
+  }
 }
 
 fieldset textarea,
diff --git a/components/history.vue b/components/history.vue
index bb01e112..7c48f06e 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -7,16 +7,16 @@
     </ul>
     <ul>
       <li @click="sort_by_time()">
-        <label for="">Time</label>
+        <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
       </li>
       <li @click="sort_by_status_code()">
-        <label for="">Status Code</label>
+        <label for="" class="flex-wrap">Status Code<i class="material-icons">sort</i></label>
       </li>
       <li @click="sort_by_url()">
-        <label for="">URL</label>
+        <label for="" class="flex-wrap">URL<i class="material-icons">sort</i></label>
       </li>
       <li @click="sort_by_path()">
-        <label for="">Path</label>
+        <label for="" class="flex-wrap">Path<i class="material-icons">sort</i></label>
       </li>
     </ul>
     <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
@@ -37,16 +37,12 @@
         <div class="show-on-small-screen">
           <li>
             <button class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
-              </svg>
+              <i class="material-icons">delete</i>
             </button>
           </li>
           <li>
             <button class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                <path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
-              </svg>
+              <i class="material-icons">edit</i>
             </button>
           </li>
         </div>
@@ -59,7 +55,10 @@
     </ul>
     <ul>
       <li v-if="!isClearingHistory">
-        <button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">Clear All</button>
+        <button class="icon" id="clear-history-button" :disabled="history.length === 0" @click="enableHistoryClearing">
+          <i class="material-icons">clear_all</i>
+          <span>Clear All</span>
+        </button>
       </li>
       <li v-else>
         <div class="flex-wrap">
diff --git a/components/section.vue b/components/section.vue
index 7ad14174..d49c0904 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
-    <legend @click.prevent="collapse">{{ label }} ↕</legend>
+    <legend @click.prevent="collapse"><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
     <div class="collapsible" :class="{ hidden: collapsed }">
       <slot />
     </div>
@@ -18,6 +18,12 @@ export default {
   computed: {
     noFrameColors() {
       return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
+    },
+  },
+
+  data() {
+    return {
+      isCollapsed: false
     }
   },
 
@@ -33,8 +39,9 @@ export default {
 
   methods: {
     collapse({ target }) {
-      const parent = target.parentNode;
+      const parent = target.parentNode.parentNode;
       parent.querySelector(".collapsible").classList.toggle("hidden");
+      this.isCollapsed = !this.isCollapsed;
     }
   }
 };
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index 97665f6a..aa1c40ad 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="color" :data-color="color">
     <span :style="{backgroundColor: color}" class="preview">
-      <svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-        <circle cx="12" cy="12" r="12"/>
-      </svg>
+      <i v-if="active" class="material-icons activeTick">done</i>
     </span>
     {{ name || color }}
   </div>
@@ -39,14 +37,14 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          fill: #fff;
+          color: #fff;
       }
     }
   }
 
   .color.vibrant {
     .preview .activeTick {
-      fill: var(--act-color);
+      color: var(--act-color);
     }
   }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 6e628b6b..6ec0e091 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -30,10 +30,8 @@
             <span>GitHub</span>
           </button>
         </a>
-        <button class="icon" id="installPWA" @click.prevent="showInstallPrompt()">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-            <path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
-          </svg>
+        <button class="icon" id="installPA" @click.prevent="showInstallPrompt()">
+          <i class="material-icons">add_to_home_screen</i>
           <span>Install PWA</span>
         </button>
         <button class="icon" onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');">
diff --git a/pages/index.vue b/pages/index.vue
index 11310044..282e1d11 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,8 @@
       <ul>
         <li>
           <button class="icon" id="show-modal" @click="showModal = true">
-            Import cURL
+            <i class="material-icons">import_export</i>
+            <span>Import cURL</span>
           </button>
         </li>
       </ul>
@@ -16,9 +17,7 @@
                 <h3 class="title">Import cURL</h3>
                 <div>
                   <button class="icon" @click="toggleModal">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-                      <path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
-                    </svg>
+                    <i class="material-icons">close</i>
                   </button>
                 </div>
               </div>
@@ -36,7 +35,8 @@
           <ul>
             <li>
               <button class="icon" @click="handleImport">
-                Import
+                <i class="material-icons">get_app</i>
+                <span>Import</span>
               </button>
             </li>
           </ul>
@@ -69,21 +69,15 @@
           <li>
             <label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
             <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL">
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                <path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
-              </svg>
+              <i class="material-icons">share</i>
               <span>Permalink</span>
             </button>
           </li>
           <li>
             <label class="hide-on-small-screen" for="code">&nbsp;</label>
             <button class="icon" id="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="isHidden">
-                <path d="M15 12c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
-              </svg>
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="!isHidden">
-                <path d="M11.885 14.988l3.104-3.098.011.11c0 1.654-1.346 3-3 3l-.115-.012zm8.048-8.032l-3.274 3.268c.212.554.341 1.149.341 1.776 0 2.757-2.243 5-5 5-.631 0-1.229-.13-1.785-.344l-2.377 2.372c1.276.588 2.671.972 4.177.972 7.733 0 11.985-8.449 11.985-8.449s-1.415-2.478-4.067-4.595zm1.431-3.536l-18.619 18.58-1.382-1.422 3.455-3.447c-3.022-2.45-4.818-5.58-4.818-5.58s4.446-7.551 12.015-7.551c1.825 0 3.456.426 4.886 1.075l3.081-3.075 1.382 1.42zm-13.751 10.922l1.519-1.515c-.077-.264-.132-.538-.132-.827 0-1.654 1.346-3 3-3 .291 0 .567.055.833.134l1.518-1.515c-.704-.382-1.496-.619-2.351-.619-2.757 0-5 2.243-5 5 0 .852.235 1.641.613 2.342z"/>
-              </svg>
+              <i class="material-icons" v-if="isHidden">visibility</i>
+              <i class="material-icons" v-if="!isHidden">visibility_off</i>
               <span>{{ isHidden ? 'Show Code' : 'Hide Code' }}</span>
             </button>
           </li>
@@ -92,11 +86,7 @@
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
           <button :disabled="!isValidURL" @click="sendRequest" class="show" id="send" ref="sendButton">
             Send <span id="hidden-message">Again</span>
-            <span>
-              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                <path d="M24 0l-6 22-8.129-7.239 7.802-8.234-10.458 7.227-7.215-1.754 24-12zm-15 16.668v7.332l3.258-4.431-3.258-2.901z"/>
-              </svg>
-            </span>
+            <span><i class="material-icons">send</i></span>
           </button>
         </li>
       </ul>
@@ -130,9 +120,7 @@
             <div>
               <li>
                 <button class="icon" @click="removeRequestBodyParam(index)" id="delParam">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                    <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
-                  </svg>
+                  <i class="material-icons">delete</i>
                 </button>
               </li>
             </div>
@@ -140,9 +128,7 @@
           <ul>
             <li>
               <button class="icon" @click="addRequestBodyParam" name="addrequest">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
-                </svg>
+                <i class="material-icons">add</i>
                 <span>Add New</span>
               </button>
             </li>
@@ -158,10 +144,8 @@
         </div>
       </div>
       <button class="icon" @click="clearContent">
-        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
-          <path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"/>
-        </svg>
-        <span>Reset</span>
+        <i class="material-icons">clear_all</i>
+        <span>Clear all</span>
       </button>
     </pw-section>
     <pw-section class="blue" label="Code" ref="requestCode" v-if="!isHidden">
@@ -181,9 +165,7 @@
             <label for="generatedCode">Generated Code</label>
             <div>
               <button class="icon" @click="copyRequestCode" id="copyRequestCode" ref="copyRequestCode">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
-                </svg>
+                <i class="material-icons">file_copy</i>
                 <span>Copy</span>
               </button>
             </div>
@@ -211,9 +193,7 @@
             <label for="body">response</label>
             <div>
               <button class="icon" @click="copyResponse" ref="copyResponse" v-if="response.body">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/>
-                </svg>
+                <i class="material-icons">file_copy</i>
                 <span>Copy</span>
               </button>
             </div>
@@ -224,12 +204,8 @@
           </div>
           <div class="align-right" v-if="response.body && responseType === 'text/html'">
             <button class="icon" @click.prevent="togglePreview">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="!previewEnabled">
-                <path d="M12.015 7c4.751 0 8.063 3.012 9.504 4.636-1.401 1.837-4.713 5.364-9.504 5.364-4.42 0-7.93-3.536-9.478-5.407 1.493-1.647 4.817-4.593 9.478-4.593zm0-2c-7.569 0-12.015 6.551-12.015 6.551s4.835 7.449 12.015 7.449c7.733 0 11.985-7.449 11.985-7.449s-4.291-6.551-11.985-6.551zm-.015 5c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm0-2c-2.209 0-4 1.792-4 4 0 2.209 1.791 4 4 4s4-1.791 4-4c0-2.208-1.791-4-4-4z" />
-              </svg>
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="previewEnabled">
-                <path d="M19.604 2.562l-3.346 3.137c-1.27-.428-2.686-.699-4.243-.699-7.569 0-12.015 6.551-12.015 6.551s1.928 2.951 5.146 5.138l-2.911 2.909 1.414 1.414 17.37-17.035-1.415-1.415zm-6.016 5.779c-3.288-1.453-6.681 1.908-5.265 5.206l-1.726 1.707c-1.814-1.16-3.225-2.65-4.06-3.66 1.493-1.648 4.817-4.594 9.478-4.594.927 0 1.796.119 2.61.315l-1.037 1.026zm-2.883 7.431l5.09-4.993c1.017 3.111-2.003 6.067-5.09 4.993zm13.295-4.221s-4.252 7.449-11.985 7.449c-1.379 0-2.662-.291-3.851-.737l1.614-1.583c.715.193 1.458.32 2.237.32 4.791 0 8.104-3.527 9.504-5.364-.729-.822-1.956-1.99-3.587-2.952l1.489-1.46c2.982 1.9 4.579 4.327 4.579 4.327z" />
-              </svg>
+              <i class="material-icons" v-if="!previewEnabled">visibility</i>
+              <i class="material-icons" v-if="previewEnabled">visibility_off</i>
               <span>{{ previewEnabled ? 'Hide Preview' : 'Preview HTML' }}</span>
             </button>
           </div>
@@ -247,9 +223,7 @@
                 <label for="auth">Authentication Type</label>
                 <div>
                   <button class="icon" @click="clearContent('auth')">
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
-                      <path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"/>
-                    </svg>
+                    <i class="material-icons">clear_all</i>
                     <span>Clear</span>
                   </button>
                 </div>
@@ -271,12 +245,8 @@
             <div>
               <li>
                 <button class="icon" id="switchVisibility" ref="switchVisibility" @click="switchVisibility">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="passwordFieldType === 'text'">
-                    <path d="M15 12c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3zm9-.449s-4.252 8.449-11.985 8.449c-7.18 0-12.015-8.449-12.015-8.449s4.446-7.551 12.015-7.551c7.694 0 11.985 7.551 11.985 7.551zm-7 .449c0-2.757-2.243-5-5-5s-5 2.243-5 5 2.243 5 5 5 5-2.243 5-5z"/>
-                  </svg>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="passwordFieldType !== 'text'">
-                    <path d="M11.885 14.988l3.104-3.098.011.11c0 1.654-1.346 3-3 3l-.115-.012zm8.048-8.032l-3.274 3.268c.212.554.341 1.149.341 1.776 0 2.757-2.243 5-5 5-.631 0-1.229-.13-1.785-.344l-2.377 2.372c1.276.588 2.671.972 4.177.972 7.733 0 11.985-8.449 11.985-8.449s-1.415-2.478-4.067-4.595zm1.431-3.536l-18.619 18.58-1.382-1.422 3.455-3.447c-3.022-2.45-4.818-5.58-4.818-5.58s4.446-7.551 12.015-7.551c1.825 0 3.456.426 4.886 1.075l3.081-3.075 1.382 1.42zm-13.751 10.922l1.519-1.515c-.077-.264-.132-.538-.132-.827 0-1.654 1.346-3 3-3 .291 0 .567.055.833.134l1.518-1.515c-.704-.382-1.496-.619-2.351-.619-2.757 0-5 2.243-5 5 0 .852.235 1.641.613 2.342z"/>
-                  </svg>
+                  <i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
+                  <i class="material-icons" v-if="passwordFieldType !== 'text'">visibility_off</i>
                 </button>
               </li>
             </div>
@@ -298,9 +268,7 @@
                 <label for="headerList">Header List</label>
                 <div>
                   <button class="icon" @click="clearContent('headers')">
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
-                      <path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"/>
-                    </svg>
+                    <i class="material-icons">clear_all</i>
                     <span>Clear</span>
                   </button>
                 </div>
@@ -318,9 +286,7 @@
             <div>
               <li>
                 <button class="icon" @click="removeRequestHeader(index)" id="header">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                    <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
-                  </svg>
+                  <i class="material-icons">delete</i>
                 </button>
               </li>
             </div>
@@ -328,9 +294,7 @@
           <ul>
             <li>
               <button class="icon" @click="addRequestHeader">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
-                </svg>
+                <i class="material-icons">add</i>
                 <span>Add New</span>
               </button>
             </li>
@@ -347,9 +311,7 @@
                 <label for="paramList">Parameter List</label>
                 <div>
                   <button class="icon" @click="clearContent('parameters')">
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
-                      <path d="M5.662 23l-5.369-5.365c-.195-.195-.293-.45-.293-.707 0-.256.098-.512.293-.707l14.929-14.928c.195-.194.451-.293.707-.293.255 0 .512.099.707.293l7.071 7.073c.196.195.293.451.293.708 0 .256-.097.511-.293.707l-11.216 11.219h5.514v2h-12.343zm3.657-2l-5.486-5.486-1.419 1.414 4.076 4.072h2.829zm.456-11.429l-4.528 4.528 5.658 5.659 4.527-4.53-5.657-5.657z"/>
-                    </svg>
+                    <i class="material-icons">clear_all</i>
                     <span>Clear</span>
                   </button>
                 </div>
@@ -367,9 +329,7 @@
             <div>
               <li>
                 <button class="icon" @click="removeRequestParam(index)" id="param">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                    <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
-                  </svg>
+                  <i class="material-icons">delete</i>
                 </button>
               </li>
             </div>
@@ -377,9 +337,7 @@
           <ul>
             <li>
               <button class="icon" @click="addRequestParam">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
-                </svg>
+                <i class="material-icons">add</i>
                 <span>Add New</span>
               </button>
             </li>
@@ -465,8 +423,8 @@
     data() {
       return {
         showModal: false,
-        copyButton: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M19.647 15.247c-1.278 0-2.429.551-3.225 1.429l-7.788-3.846c.062-.343.079-.64.067-.942l8.058-4.231c.769.682 1.78 1.097 2.889 1.097 2.404-.001 4.352-1.949 4.352-4.353s-1.948-4.353-4.353-4.353-4.353 1.949-4.353 4.353c0 .18.012.356.033.53l-7.828 4.111c-.793-.829-1.908-1.347-3.146-1.347-2.405 0-4.353 1.949-4.353 4.353s1.948 4.353 4.353 4.353c1.013 0 1.943-.347 2.684-.927l8.26 4.078-.001.047c0 2.404 1.948 4.353 4.353 4.353s4.351-1.949 4.351-4.353-1.948-4.352-4.353-4.352z"/></svg>',
-        copiedButton: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>',
+        copyButton: '<i class="material-icons">file_copy</i>',
+        copiedButton: '<i class="material-icons">done</i>',
         method: 'GET',
         url: 'https://reqres.in',
         auth: 'None',
@@ -1087,17 +1045,19 @@
             break;
           default:
             this.method= 'GET',
-            this.url= 'https://reqres.in',
-            this.auth= 'None',
-            this.path= '/api/users',
+            this.url = 'https://reqres.in',
+            this.auth = 'None',
+            this.path = '/api/users',
             this.auth = 'None';
             this.httpUser = '';
             this.httpPassword = '';
             this.headers = [];
             this.params = [];
+            this.bodyParams = [];
+            this.rawParams = '';
         }
         this.$toast.error('Cleared', {
-          icon: 'delete',
+          icon: 'clear_all',
           position: 'bottom-center',
           duration: 1000,
         });
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 25123abe..4dbe5a80 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -12,12 +12,8 @@
             <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
               {{ toggleConnectionVerb }}
               <span>
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" v-if="connectionState">
-                  <path d="M16 0l-3 9h9l-1.866 2h-14.4l10.266-11zm2.267 13h-14.4l-1.867 2h9l-3 9 10.267-11z"/>
-                </svg>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" v-if="!connectionState">
-                  <path d="M8 24l3-9h-9l14-15-3 9h9l-14 15z"/>
-                </svg>
+                <i class="material-icons" v-if="!connectionState">sync</i>
+                <i class="material-icons" v-if="connectionState">sync_disabled</i>
               </span>
             </button>
           </li>
@@ -47,9 +43,7 @@
             <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
               Send
               <span>
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 0l-6 22-8.129-7.239 7.802-8.234-10.458 7.227-7.215-1.754 24-12zm-15 16.668v7.332l3.258-4.431-3.258-2.901z"/>
-                </svg>
+                <i class="material-icons">send</i>
               </span>
             </button>
           </li>