fix refresh icon

src/components/sidebar/AppSidebar.vue

@@ -25,7 +25,16 @@ const emit = defineEmits<{
         <h1>Browser Assistant</h1>
       </div>
       <button class="refresh-icon-button" type="button" @click="emit('refresh')">
-        <span class="refresh-icon" aria-hidden="true"></span>
+        <svg class="refresh-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            d="M20 11a8 8 0 1 0-2.34 5.66M20 4v7h-7"
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+        </svg>
         <span class="sr-only">{{ loading || configsLoading ? "Refreshing..." : "Refresh" }}</span>
       </button>
     </div>
@@ -129,25 +138,9 @@ const emit = defineEmits<{
 }
 
 .refresh-icon {
-  width: 14px;
-  height: 14px;
-  border: 1.9px solid #334155;
-  border-left-color: transparent;
-  position: relative;
-  border-radius: 50%;
-  transform: rotate(-22deg);
-}
-
-.refresh-icon::after {
-  content: "";
-  position: absolute;
-  top: -1px;
-  right: -2px;
-  width: 5px;
-  height: 5px;
-  border-top: 1.9px solid #334155;
-  border-right: 1.9px solid #334155;
-  transform: rotate(0deg);
+  width: 16px;
+  height: 16px;
+  color: #334155;
 }
 
 .sr-only {