Leaflet custom marker position on the map is changing

Question

I'm using Leaflet with custom markers. It seems that when I add a marker the top left corner is the location saved, and the icon is presented with the top left corner as the anchor. The result is that when users zoom in/out the marker seems like its "moving" because the location it is pointing to is the bottom middle point of the icon.

How can I select the bottom middle point and also keep the marker pointing to it when the user zoom in and out?

I have a different icon where I want to keep the middle of the icon (round marker).

This is how it looks like:

And here is the code:

  defaultIcon = L.icon({
    iconUrl: 'assets/img/marker-icon.png',
    iconRetinaUrl: 'assets/img/marker-icon-2x.png',
    shadowUrl: 'assets/img/marker-shadow.png',
  });
  MyCustomMarker = L.Icon.extend({
    options: {
      shadowUrl: null,
      iconAnchor: new L.Point(12, 12),
      iconSize: new L.Point(24, 24),
    },
  });

(Changing the iconAnchor to 0,12 is not making any change either)