Instead of passing childCount to iconCreateFunction, pass the markerCluster instead. Allows the user more flexibility with deciding on the icon.

README.md

@@ -35,11 +35,12 @@ var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: false, showCoverageO
 As an option to MarkerClusterGroup you can provide your own function for creating the Icon for the clustered markers.
 The default implementation changes color at bounds of 10 and 100, but more advanced uses may require customising this.
 You do not need to include the .Default css if you go this way.
+You are passed a MarkerCluster object, you'll probably want to use getChildCount() or getAllChildMarkers() to work out the icon to show
 
 ```javascript
 var markers = new L.MarkerClusterGroup({ options: {
-	iconCreateFunction: function(childCount) {
-		return new L.DivIcon({ html: '<b>' + childCount + '</b>' });
+	iconCreateFunction: function(cluster) {
+		return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
 	}
 }});
 ```

example/marker-clustering-custom.html

@@ -40,8 +40,8 @@
 		//Custom radius and icon create function
 		var markers = new L.MarkerClusterGroup({
 			maxClusterRadius: 120,
-			iconCreateFunction: function (count) {
-				return new L.DivIcon({ html: count, className: 'mycluster', iconSize: new L.Point(40, 40) });
+			iconCreateFunction: function (cluster) {
+				return new L.DivIcon({ html: cluster.getChildCount(), className: 'mycluster', iconSize: new L.Point(40, 40) });
 			},
 			//Disable all of the defaults:
 			spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false

src/MarkerCluster.js

@@ -43,7 +43,7 @@ L.MarkerCluster = L.Marker.extend({
 
 	_baseInit: function () {
 		this._latlng = this._wLatLng;
-		L.Marker.prototype.initialize.call(this, this._latlng, { icon: this._group.options.iconCreateFunction(this._childCount) });
+		L.Marker.prototype.initialize.call(this, this._latlng, { icon: this._group.options.iconCreateFunction(this) });
 	},
 
 	_addChild: function (new1) {
@@ -57,7 +57,7 @@ L.MarkerCluster = L.Marker.extend({
 		}
 
 		if (this._icon) {
-			this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+			this.setIcon(this._group.options.iconCreateFunction(this));
 		}
 
 	},
@@ -195,7 +195,7 @@ L.MarkerCluster = L.Marker.extend({
 
 		if (result) {
 			if (!('_zoom' in this)) {
-				this.setIcon(this._group.options.iconCreateFunction(this._childCount));
+				this.setIcon(this._group.options.iconCreateFunction(this));
 			}
 			this._recalculateBounds();
 		}
@@ -240,7 +240,7 @@ L.MarkerCluster = L.Marker.extend({
 				this._recalculateBounds();
 
 				if (!('_zoom' in this)) {
-					this.setIcon(group.options.iconCreateFunction(this._childCount));
+					this.setIcon(group.options.iconCreateFunction(this));
 				}
 				return true;
 			}
@@ -253,7 +253,7 @@ L.MarkerCluster = L.Marker.extend({
 			if (child._bounds.contains(layer._latlng) && child._recursivelyRemoveLayer(layer)) {
 				this._childCount--;
 				if (!('_zoom' in this)) {
-					this.setIcon(group.options.iconCreateFunction(this._childCount));
+					this.setIcon(group.options.iconCreateFunction(this));
 				}
 
 				//if our child cluster is no longer a cluster, remove it and replace with just the marker
@@ -273,7 +273,7 @@ L.MarkerCluster = L.Marker.extend({
 				this._recalculateBounds();
 
 				if (this._icon && this._childCount > 1) { //No need to update if we are getting removed anyway
-					this.setIcon(group.options.iconCreateFunction(this._childCount));
+					this.setIcon(group.options.iconCreateFunction(this));
 				}
 				return true;
 			}

src/MarkerClusterGroup.js

@@ -146,7 +146,9 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
 	},
 
 	//Default functionality
-	_defaultIconCreateFunction: function (childCount) {
+	_defaultIconCreateFunction: function (cluster) {
+		var childCount = cluster.getChildCount();
+
 		var c = ' marker-cluster-';
 		if (childCount < 10) {
 			c += 'small';