From e26a8e5e534414ba44c8d7579a9105837908bcb6 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Mon, 22 Dec 2025 14:08:16 +0530
Subject: [PATCH] fix: update filter area icons for match types and improve
 button alignment

---
 frappe/public/js/frappe/list/base_list.js | 12 +++++++++---
 frappe/public/scss/desk/filters.scss      |  2 ++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/frappe/list/base_list.js b/frappe/public/js/frappe/list/base_list.js
index 388c84b30f..915de74cd1 100644
--- a/frappe/public/js/frappe/list/base_list.js
+++ b/frappe/public/js/frappe/list/base_list.js
@@ -1248,7 +1248,13 @@ class FilterArea {
 			const $input = field.$wrapper.find("input").first();
 			if (!$input.length || $input.closest(".input-group").length) return;
 
-			const getSymbol = (match_type) => (match_type === "=" ? "=" : "≈");
+			const getIcon = (match_type) => {
+				if (match_type === "=") {
+					return frappe.utils.icon("equal");
+				} else {
+					return frappe.utils.icon("equal-approximately");
+				}
+			};
 
 			$input.wrap('<div class="input-group"></div>');
 			const $inputGroup = $input.parent();
@@ -1260,7 +1266,7 @@ class FilterArea {
 					data-toggle="dropdown"
 					aria-haspopup="true"
 					aria-expanded="false">
-					${getSymbol(df.match_type || "≈")}
+					${getIcon(df.match_type || "≈")}
 
 				</button>
 				<ul class="dropdown-menu match-type-dropdown-menu dropdown-menu-right">
@@ -1283,7 +1289,7 @@ class FilterArea {
 				if (new_type === current_type) return;
 
 				field.df.match_type = new_type;
-				$dropdown.find("button").html(`${getSymbol(new_type)}`);
+				$dropdown.find("button").html(getIcon(new_type));
 
 				let value = field.get_value?.();
 				if (new_type === "=" && value) {
diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss
index 7552eed401..7d1b418547 100644
--- a/frappe/public/scss/desk/filters.scss
+++ b/frappe/public/scss/desk/filters.scss
@@ -117,6 +117,8 @@
 	border-bottom-left-radius: 0 !important;
 	height: var(--btn-height);
 	border-left: 1px solid var(--btn-group-border-color);
+	display: flex;
+	align-items: center;
 
 	&:focus {
 		box-shadow: none !important;