Trying to remove or Change the icon of default markers of <agm-direction> in angular google maps

I am implementing the angular google maps where I am getting pickup and destination location from user and displaying the direction through <agm-direction> in angular google maps. I have displayed the marker for origin and destination on maps but after implementing the <agm-direction> it started displaying the default markers 'A' and 'B'. I want to either remove these markers from map or change the default icons from 'A' and 'B' to some other icon.


<agm-map id="map" [latitude]='lat' [longitude]='lng' (mapReady)="addMarker()" [zoom]='zoom'>
    <agm-marker [iconUrl]="curicon" [latitude]="lat" [longitude]="lng"></agm-marker>
    <agm-marker [iconUrl]="desticon" [latitude]="latitude" [longitude]="longitude"></agm-marker>
    <agm-direction [origin]="origin" [destination]="destination" >
    </agm-direction>
</agm-map>

ts code :
public origin: {lat :30.7224576,lng:76.6984192};
public destination: {lat:30.7134158,lng:76.71059969999999};
public curicon="http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
public desticon="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";

Solution

You need to specify the [markerOptions] input of the <agm-direction> tag as following:

<agm-direction ... 
[renderOptions]="renderOptions" 
[markerOptions]="markerOptions">
</agm-direction>

and inside your Typescript :

   public renderOptions = {
        suppressMarkers: true,
    }

    public markerOptions = {
        origin: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756617_face_512x512.png',
            draggable: true,
        },
        destination: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756626_face_512x512.png',
            label: 'MARKER LABEL',
            opacity: 0.8,
        },
    }

as you can see, you can select a custom image for the markers.

for more info, check : https://robby570.tw/Agm-Direction-Docs/source/featured/marker.html