Fix the marker shape for hex Icon colors

folium/map.py

@@ -347,6 +347,8 @@ class Icon(MacroElement):
              'darkpurple', 'white', 'pink', 'lightblue', 'lightgreen',
              'gray', 'black', 'lightgray']
 
+        or a hex color code such as '#00A6A6'.
+
     icon_color : str, default 'white'
         The color of the drawing on the marker. You can use colors above,
         or an html color code.
@@ -377,25 +379,24 @@ class Icon(MacroElement):
         {% macro header(this, kwargs) %}
             {% if this.is_hex %}
             <style>
-                /* Dynamically generated CSS to replace the sprite image with a colored teardrop */
+                /* Replace the sprite image with a pin of the same size in the given color.
+                   Leaflet positions the marker with an inline transform, so the pin is a
+                   rotated pseudo-element behind the icon. */
                 .awesome-marker-icon-{{ this.color_name }} {
                     background-image: none;
+                }
+                .awesome-marker-icon-{{ this.color_name }}::before {
+                    content: "";
+                    position: absolute;
+                    z-index: -1;
+                    left: 3px;
+                    top: 4px;
+                    width: 29px;
+                    height: 29px;
                     background-color: {{ this.color }};
-                    width: 35px;
-                    height: 35px;
                     border-radius: 50% 50% 50% 0;
-                    transform: rotate(-45deg);
-                    margin-top: -15px;
-                    margin-left: -17px;
-                    border: 2px solid white;
-                    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                /* Counter-rotate the inner icon so it stands up straight */
-                .awesome-marker-icon-{{ this.color_name }} i {
-                    transform: rotate(45deg);
+                    transform: scaleY(1.14) rotate(-45deg);
+                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
                 }
             </style>
             {% endif %}
@@ -436,7 +437,9 @@ def __init__(
         self._name = "Icon"
 
         # 1. Determine if the input is a hex color
-        self.is_hex = color.startswith("#") and len(color) in (4, 7)
+        self.is_hex = (
+            isinstance(color, str) and color.startswith("#") and len(color) in (4, 7)
+        )
         self.color = color
 
         # 2. Strip the '#' for the CSS class name generation

tests/test_map.py

@@ -287,6 +287,18 @@ def test_marker_numpy_array_as_location():
     Marker(np.array([0, 0]))
 
 
+def test_icon_hex_marker_color():
+    with warnings.catch_warnings():
+        warnings.simplefilter("error")
+        icon = Icon(color="#00A6A6")
+    assert icon.options["marker_color"] == "00A6A6"
+    header = normalize(icon._template.module.header(this=icon, kwargs={}))
+    # The pin is drawn on a pseudo-element: Leaflet's inline transform on the
+    # marker element would override a rotation set on the element itself.
+    assert ".awesome-marker-icon-00A6A6::before {" in header
+    assert "background-color: #00A6A6;" in header
+
+
 @pytest.mark.filterwarnings("ignore::UserWarning")
 def test_icon_invalid_marker_colors():
     pytest.warns(UserWarning, Icon, color="lila")