arcGIS 4.18 locate widget custom icon

I have to change the default icon on the Locate widget on arcGIS 4.18. The default icon class is, esri-icon-locate how can I change it to the class, 'esri-icon-navigation'?

I am going through the documentation, https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html#iconClass

I have tried to use the property, 'iconClass'. But not reflecting in the map icon. Please find the code below,

  var locateBtn = new Locate({
    view: view,
    // iconClass: '\ue666'
    iconClass: 'esri-icon-navigation'
  });
  view.ui.add(locateBtn, {
    position: "manual",
  });

Solution

KER,

You actually right, does not work as expected. Setting iconClass should be the solution.

Funny fact if you check the default iconClass is actually esri-icon-north-navigation, which obviously in not.

Anyway, I am gonna give a dirty solution, just overlap the class you want,

view.when(_ => {
  const n = document.getElementsByClassName("esri-icon-locate");
  if (n && n.length === 1) {
    n[0].classList += " esri-icon-navigation"
  }
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.18/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Locate"
    ], function (Map, MapView, Locate) {
      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-56.049, 38.485, 78],
        zoom: 3
      });

      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      view.when(_ => {
        const n = document.getElementsByClassName("esri-icon-locate");
        if (n && n.length === 1) {
          n[0].classList += " esri-icon-navigation"
        }
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>