From 3504ef5ddb311b700fafbce70cd82b6ad2cbd9bc Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 5 Oct 2022 11:50:08 +1100
Subject: [PATCH] search fields: update clear icon to match m3

---
 src/theme/components.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index fc941109..003a621f 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -384,6 +384,18 @@ export const components = (theme: Theme): ThemeOptions => {
                 paddingRight: theme.spacing(1),
               },
             },
+
+            "input[type='search']::-webkit-search-cancel-button": {
+              appearance: "none",
+              mask: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z'/%3e%3c/svg%3e") no-repeat 50% 50%`,
+              backgroundColor: "currentColor",
+              opacity: 0.67,
+
+              width: "1.5rem",
+              height: "1.5rem",
+              marginLeft: theme.spacing(0.5),
+              marginRight: 0,
+            },
           },
         },
       },