Using Esri Icon Fonts with map graphics | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

One potential use of the Esri Icon Fonts is to use them as symbol property of Graphic.

In the code snippet below, a TextSymbol is created by specifying the color, text, and font. The font property is created by autocasting the Font class. Set the font family property toCalciteWebCoreIcons to access the Esri Icon Fonts.

const textSymbol = {
  type: "text", // autocasts as new TextSymbol()
  color: "#7A003C",
  text: "\ue61d", // esri-icon-map-pin
  font: {
    // autocasts as new Font()
    size: 36,
    family: "CalciteWebCoreIcons", // Esri Icon Font
  },
};

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Using Esri Icon Fonts with map graphics | Sample | ArcGIS Maps SDK for JavaScript</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        margin: 0;
      }
    </style>

    <script type="module">
      const [Map, PopupTemplate, MapView, Graphic, Point] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/PopupTemplate.js",
        "@arcgis/core/views/MapView.js",
        "@arcgis/core/Graphic.js",
        "@arcgis/core/geometry/Point.js",
      ]);

      const map = new Map({
        basemap: "gray-vector",
      });

      const view = new MapView({
        center: [-97.63, 38.34],
        container: "viewDiv",
        map: map,
        zoom: 3,
      });

      /*************************
       * Create point graphics
       *************************/

      // First create a point geometry
      const point1 = new Point({
        longitude: -117.19,
        latitude: 34.05,
      });

      // Then create another point geometry
      const point2 = new Point({
        longitude: -87.63,
        latitude: 41.88,
      });

      // Then create another point geometry
      const point3 = new Point({
        longitude: -71.06,
        latitude: 42.36,
      });

      // Then create another point geometry
      const point4 = new Point({
        longitude: -122.33,
        latitude: 47.6,
      });

      // Then create a final point geometry
      const point5 = new Point({
        longitude: -104.99,
        latitude: 39.74,
      });

      // Create a symbol for drawing the point
      const textSymbol = {
        type: "text", // autocasts as new TextSymbol()
        color: "#7A003C",
        text: "\ue61d", // esri-icon-map-pin
        font: {
          // autocasts as new Font()
          size: 36,
          family: "CalciteWebCoreIcons",
        },
      };

      // Create a graphic and add the geometry and symbol to it
      const pointGraphic1 = new Graphic({
        geometry: point1,
        symbol: textSymbol,
      });

      // Create another graphic and add the geometry and symbol to it
      const pointGraphic2 = new Graphic({
        geometry: point2,
        symbol: textSymbol,
      });

      // Create another graphic and add the geometry and symbol to it
      const pointGraphic3 = new Graphic({
        geometry: point3,
        symbol: textSymbol,
      });

      // Create another graphic and add the geometry and symbol to it
      const pointGraphic4 = new Graphic({
        geometry: point4,
        symbol: textSymbol,
      });

      // Create one last graphic and add the geometry and symbol to it
      const pointGraphic5 = new Graphic({
        geometry: point5,
        symbol: textSymbol,
      });

      // Add the graphics to the view's graphics layer
      view.graphics.addMany([
        pointGraphic1,
        pointGraphic2,
        pointGraphic3,
        pointGraphic4,
        pointGraphic5,
      ]);
    </script>
  </head>

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