title: Leaflet divIcon does not show up on map
body: <p>I am trying to make a custom marker using Leaflet's divIcon. Does anyone see problems with my code? When I run it with the normal default marker, it works fine. However, when I run it and try to use myIcon, no marker shows up. I've replaced my mapbox access token with <em>access_token</em>.</p>
  <p>Any help would be great, thanks so much!</p>
  <pre class="lang-html prettyprint-override"><code>
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;Donut Country View&lt;/title&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot;
       integrity=&quot;sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==&quot;
       crossorigin=&quot;&quot;/&gt;
       &lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;
      integrity=&quot;sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==&quot;
      crossorigin=&quot;&quot;&gt;&lt;/script&gt;
        &lt;style&gt;
          body { margin: 0; padding: 0; }
          #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
          }
          .donut {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #E81D26;
            border: 4px solid #fff;
            box-shadow: 0 0 0 5px red, 0 0 0 10px white, 0 0 0 15px red;
          }
        &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
  
        var mapboxAccessToken = *access_token*;
        var map = L.map('map').setView([35.749907, -98.358421], 4);
  
        var tileL = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, {
            id: 'mapbox/light-v9',
            attribution: 'Map data &amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors, Imagery © &lt;a href=&quot;https://www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(map);
  
        addCityMarker(&quot;Houston&quot;, [29.749907, -95.358421]); //plots Houston's city marker
        addCityMarker(&quot;Washington, D.C.&quot;, [38.8950, -77.0]); //plots DC's city marker
  
        var myIcon = L.divIcon({
          className: 'donut'
          //html: &quot;&lt;div class=\&quot;donut\&quot; &gt;&lt;/div&gt;&quot;
        });
  
        function addCityMarker(name, center) { // plots a clickable marker, given a city's name and central coordinates.
  
          var city = L.marker(center, {
             icon: myIcon,
             title: name
          }).addTo(map);
  
          city.on('click', function(e){
              map.setView(e.latlng, 12);
          });
        }
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  </code></pre>