JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="map"></div>

CSS

#map {
    height: 400px;
}

.marker-pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #c30b82;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
}

.marker-pin::after {
    content: '';
    width: 24px;
    height: 24px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
 }

.custom-div-icon i {
   position: absolute;
   width: 22px;
   font-size: 22px;
   left: 0;
   right: 0;
   margin: 10px auto;
   text-align: center;
}

.custom-div-icon i.awesome {
   margin: 12px auto;
   font-size: 17px;
}

JavaScript

var map = L.map("map").fitBounds([[51.5, 10], [55.5, 13]]);

L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

var icon = L.divIcon({
				className: 'custom-div-icon',
        html: "<div style='background-color:#c30b82;' class='marker-pin'></div><i class='material-icons'>weekend</i>",
        iconSize: [30, 42],
        iconAnchor: [15, 42]
    });
    
var marker = L.marker([53, 12], {
    	icon: icon
    }).addTo(map);
    
icon = L.divIcon({
				className: 'custom-div-icon',
        html: "<div style='background-color:#4838cc;' class='marker-pin'></div><i class='fa fa-camera awesome'>",
        iconSize: [30, 42],
        iconAnchor: [15, 42]
    });
marker = L.marker([53.5, 13], {
    	icon: icon
    }).addTo(map);