Add custom search icon component instead of modifying existing one's …

…styles

client/sites-dashboard/components/searchable-sites-table.tsx

@@ -3,6 +3,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import { useMemo, useState } from 'react';
 import { searchCollection } from 'calypso/components/search-sites/utils';
 import { SitesSearch } from './sites-search';
+import { SitesSearchIcon } from './sites-search-icon';
 import { SitesTable } from './sites-table';
 import type { SiteData } from 'calypso/state/ui/selectors/site-data';
 
@@ -37,6 +38,7 @@ export function SearchableSitesTable( { sites }: SearchableSitesTableProps ) {
 						` }
 					>
 						<SitesSearch
+							searchIcon={ <SitesSearchIcon /> }
 							onSearch={ handleSearch }
 							delaySearch
 							isReskinned

client/sites-dashboard/components/sites-search-icon.tsx

@@ -0,0 +1,32 @@
+export const SitesSearchIcon = () => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style={ {
+				paddingLeft: '16px',
+				paddingRight: '10px',
+				height: '100%',
+				backgroundColor: 'var( --color-surface )',
+			} }
+		>
+			<path
+				d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z"
+				stroke="#8C8F94"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M17.5 17.5L13.875 13.875"
+				stroke="#8C8F94"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	);
+};

client/sites-dashboard/components/sites-search.ts

@@ -7,19 +7,6 @@ export const SitesSearch = styled( Search )`
 	overflow: hidden;
 	height: 44px;
 
-	.search-component__icon-search {
-		background: var( --color-surface );
-		height: 100%;
-		fill: currentColor;
-		height: 100%;
-
-		// Flip horizontally
-		transform: scale( -1, 1 );
-
-		padding-right: 8px;
-		padding-left: 5px;
-	}
-
 	// TODO: make the fade optional in the component
 	.search-component__input-fade::before {
 		display: none !important;