Customizing react-leaflet marker icons by using font awesome

For some reasons code is not getting formatted. See code on code sandbox

Here is how you can use font-awesome icons as markers.

  1. Add font-awesome CDN to your index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  1. Use divIcon along with renderToStaticMarkup from react-dom/server to generate icon for marker. And pass this divIcon to Marker as a icon prop.

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { renderToStaticMarkup } from 'react-dom/server';
    import { divIcon } from 'leaflet';
    import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
    
    import './styles.css';
    
    class App extends Component {
      state = {
        lat: 51.505,
        lng: -0.091,
        zoom: 13,
      };
    
    render() {
        const position = [this.state.lat, this.state.lng];
        const iconMarkup = renderToStaticMarkup(<i className=" fa fa-map-marker-alt fa-3x" />);
        const customMarkerIcon = divIcon({
          html: iconMarkup,
        });
    
        return (
          <Map center={position} zoom={this.state.zoom}>
            <TileLayer
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
              url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
            />
            <Marker position={position} icon={customMarkerIcon}>
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
          </Map>
        );
      }
    }
    
    const rootElement = document.getElementById('root');
    ReactDOM.render(<App />, rootElement);
    
  2. Override divIcon default style by adding the following class to your css file

    .leaflet-div-icon {
        background: transparent;
        border: none;
    }  
    
    • Here is a working example of the same:
      https://codesandbox.io/s/4ry180jl34

For those who already use the React components of Fontawesome (FontAwesomeIcon), there is a solution that does not require importing via CDN again. It uses the same principles of Murli's answers, but instead of adding <i className=" fa fa-map-marker-alt fa-3x" />, you can convert the FontAwesomeIcon component to html and pass that into the html attribute of the divIcon. It would look like this (adapted the example of the accepted answer):

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import Leaflet from 'leaflet'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import './styles.css';

// FontAwesome requirements
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
library.add(faUserAstronaut)

class App extends Component {
  state = {
    lat: 51.505,
    lng: -0.091,
    zoom: 13,
  };

  render() {
    const position = [this.state.lat, this.state.lng];
    const iconHTML = ReactDOMServer.renderToString(<FontAwesomeIcon icon='user-astronaut' />)
    const customMarkerIcon = new Leaflet.DivIcon({
      html: iconHTML,
    });

    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={position} icon={customMarkerIcon}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);