How to make custom arrow mark in agm-map?

The accepted answer will not work because those aren't properties of the agm-marker.

Inside iconUrl property you can use any of these types:

string

Icon: https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Icon

Symbol: https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Symbol

For example, to use a custom image marker (SVG in this case) with desired size you can use this object in the [iconUrl] property:

{
    url: './assets/images/blue-marker.svg',
    scaledSize: {
        width: 40,
        height: 60
    }
}

You can use the existing api and set the iconUrl

<agm-marker
   [latitude]="location.latitude"
   [longitude]="location.longitude"
   [iconAnchorX]="10"
   [iconAnchorY]="10"
   [iconHeight]="20"
   [iconWidth]="20">
   [iconUrl]="location.icon">
 </agm-marker>