replace search icon font with svg

this was the last use of icon fonts, so we can now remove the edge-icons
font files as well.

assets/css/projects.scss

@@ -79,6 +79,8 @@
   line-height: calc(1.8rem - (1px * 2));
   padding: 0 var(--feather-grid-medium);
   background-color: var(--tw-color-blue-light);
+  display: flex;
+  justify-content: space-between;
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--tw-color-gray-600-experimental);
@@ -91,18 +93,20 @@
   min-width: 90%;
   line-height: calc(1.8rem - (1px * 2));
   background-color: transparent;
+  &::placeholder {
+    color: white;
+  }
+  &:focus {
+    outline: none;
+  }
 }
 
-.search-box::placeholder {
-  color: white;
-}
-
-.Icon--search {
-  float: right;
-}
-
-input:focus {
-  outline: none;
+#search-icon {
+  fill: #ffffff;
+  height: 17px;
+  width: 17px;
+  margin-top: 9px;
+  flex-shrink: 0;
 }
 
 .no-results {

layouts/_default/projects.html

@@ -2,7 +2,7 @@
 <h1 class="large-title">Projects</h1>
 <div class="search-bar">
     <input class="search-box" type="text" name="search" placeholder="Search Projects" autocomplete="off" />
-    <span class="Icon Icon--search"></span>
+    <svg id="search-icon" viewBox="0 0 24 24" aria-hidden="true" class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
 </div>
 {{ end }}