chore(geo): Add section to geo search for customizing search icons (aws-amplify#3721)

* chore(geo): Add section to geo search for customizing search icons

* change geocoder custom image screenshot

* Update src/fragments/lib/geo/js/search.mdx

Co-authored-by: Harshita Daddala <[email protected]>

* Update src/fragments/lib/geo/js/search.mdx

Co-authored-by: Harshita Daddala <[email protected]>

Co-authored-by: Harshita Daddala <[email protected]>

Author: thaddmt

public/images/geocoder-custom-images.png

@@ -63,6 +63,24 @@ document.getElementById("search").appendChild(geocoder.onAdd());
 
 ![A search box](/images/geocoder-search-box.png)
 
+### Customize Search Icons
+
+You can customize the search icons used by the [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) to use any image of your choosing. [MapLibre markers](https://maplibre.org/maplibre-gl-js-docs/api/markers/) require an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) when passing in custom images.
+
+The following example puts an existing SVG icon into an HTMLElement before being passed to `createAmplifyGeocoder` which creates a [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder).
+
+```javascript
+import myIcon from "./myIcon.svg" // relative path to your custom icon
+
+const icon = new Image(100, 100);
+icon.src = myIcon;
+
+const geocoder = createAmplifyGeocoder({ showResultMarkers: { element: icon } });
+map.addControl(geocoder);
+```
+
+![A search box](/images/geocoder-custom-images.png)
+
 ## Location-based search capabilities
 
 Amplify Geo enables you to search for locations by text, addresses, or geo-coordinates.