Custom marker for leafletmap in vue js

I have implemented a leaflet vue map by following this link: https://vue2-leaflet.netlify.app/quickstart/#hello-map and also this git repo guide:
https://github.com/CodingGarden/colorado-covid-vaccine-map
I have a map with some pin/marker, but I want to create my own custom marker with like round circle and have some initiial in it ( please see image below),
have tried certain things but is not working.
Any help will be appreciated. Thanks in Advance!

my code:

   circleMarker = LMarker.circle([51.508, -0.11], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
     }),

  data() {
    return {
    // more data here
    //iconUrl: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png",
      iconUrl: circleMarker,
   }
   }

//And adding the iconUrl in the <l-icon component:

<l-marker v-for="place in places" :key="place.address" :lat-lng="[place.location.latitude, place.location.longitude]">
        <l-icon :icon-url="iconUrl" :icon-size="iconSize" class="dl-marker" />
        <l-popup>
         // some code here
        </l-popup>
 </l-marker>

I want to replace the ‘P’ marker with round circle marker with name initial as below ( second image);

---