chore: replaced svg with pf-icon

Author: ArathyKumar

elements/pf-search-input/pf-search-input.css

@@ -259,10 +259,13 @@
 }
 
 #close-button {
+	--pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+	--pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+	--pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+
   color: currentColor;
   background-color: transparent;
-  justify-content: flex-end;
-  padding: var(--pf-global--spacer--sm, 0.5rem);
 	max-height: 2.25rem;
 	max-width: 2.25rem;
 	box-sizing: border-box;
@@ -271,11 +274,11 @@
 	justify-content: center;
 	border-radius: 0px;
 	position: relative;
-}
 
-#close-button svg {
-	position: relative;
-	top: 3px;
+	pf-icon {
+		position: relative;
+		top: 3px;
+	}
 }
 
 #toggle-text {

elements/pf-search-input/pf-search-input.ts

@@ -184,11 +184,7 @@ export class PfSearchInput extends LitElement {
       >
         <div id="toggle">
           <div class="search-icon">
-            <svg class="pf-v5-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" 
-            role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 
-            44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 
-            6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 
-            0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
+            <pf-icon size="md" icon="search" set="fas">search</pf-icon>
           </div>
           <input 
             id="toggle-input"
@@ -202,16 +198,7 @@ export class PfSearchInput extends LitElement {
             plain 
             label="Close"
           >
-            <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
-              <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
-              0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
-              189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 
-              0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 
-              356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 
-              12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
-              44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
-              </path>
-            </svg>
+            <pf-icon size="md" icon="close" set="patternfly">close</pf-icon>
           </pf-button>
           <div class="visually-hidden" id="toggle-button"></div>
         </div>