The Esri Icon Font is a monochromatic icon set used at Esri for a consistent Esri branded theme.
Icon fonts have several advantages such as the ability to quickly change their color, and the fact that icon fonts can size themselves to be proportional to text placed with them.
For 2D MapViews, Esri Icon Fonts are available on hosted fonts files in .pbf
format.
These fonts are available via https
. The URL can be configured to point to your own font resources by
setting the esriConfig.fontsUrl property.
For more information on web development and fonts see the Fundamental text and font styling and Web Fonts Mozilla Developer Network articles.
Using the Esri Icon Fonts as a graphic's symbol
One potential use of the Esri Icon Fonts is to use them as the 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.
For 2D MapViews and 3D SceneViews,
the Font.family for Esri Icon Font is Calcite
.
For more information see the Using Esri Icon Fonts with map graphics sample. See the CSS class names and Unicode values section of this topic for a complete list of unicode values.
const 2DtextSymbol = new TextSymbol({
color: '#7A003C',
text: '\ue61d', // esri-icon-map-pin
font: { // autocast as new Font()
size: 24,
family: 'CalciteWebCoreIcons'
}
});
const 3DtextSymbol = new TextSymbol({
color: '#7A003C',
text: '\ue61d', // esri-icon-map-pin
font: { // autocast as new Font()
size: 24,
family: 'CalciteWebCoreIcons'
}
});
Using the Esri Icon Fonts as a label
Another potential use of the Esri Icon Fonts is to use them as the font.family
property of the Label class for a FeatureLayer. In the code snippet below, a
LabelClass is created by autocasting the
symbol type as text
, the
color, and font.
Lastly, we defined the labelPlacement and the
labelExpressionInfo.
const labelClass = { // autocasts as new LabelClass()
symbol: {
type: 'text', // autocasts as new TextSymbol()
color: 'green',
font: { // autocast as new Font()
family: 'CalciteWebCoreIcons',
size: 12
}
},
labelPlacement: 'above-left',
labelExpressionInfo: {
expression: '"\ue61d"' // esri-icon-map-pin
}
};
CSS class names and Unicode values
The following list of Esri Icon Fonts display a preview of the font, the CSS class name required to use the icon font, and the CSS unicode
value necessary to specify the content
CSS property used with the ::before
and ::after
pseudo-elements to generate content in an element or the value of the
TextSymbol.text property.
esri-icon-close
esri-icon-drag-horizontal
esri-icon-drag-vertical
esri-icon-handle-horizontal
esri-icon-handle-vertical
esri-icon-check-mark
esri-icon-left-triangle-arrow
esri-icon-right-triangle-arrow
esri-icon-down-arrow
esri-icon-up-arrow
esri-icon-overview-arrow-bottom-left
esri-icon-overview-arrow-bottom-right
esri-icon-overview-arrow-top-left
esri-icon-overview-arrow-top-right
esri-icon-maximize
esri-icon-minimize
esri-icon-checkbox-unchecked
esri-icon-checkbox-checked
esri-icon-radio-unchecked
esri-icon-radio-checked
esri-icon-up-arrow-circled
esri-icon-down-arrow-circled
esri-icon-left-arrow-circled
esri-icon-right-arrow-circled
esri-icon-zoom-out-fixed
esri-icon-zoom-in-fixed
esri-icon-refresh
esri-icon-edit
esri-icon-authorize
esri-icon-map-pin
esri-icon-blank-map-pin
esri-icon-table
esri-icon-plus
esri-icon-minus
esri-icon-beginning
esri-icon-reverse
esri-icon-pause
esri-icon-play
esri-icon-forward
esri-icon-end
esri-icon-erase
esri-icon-up-down-arrows
esri-icon-left
esri-icon-right
esri-icon-announcement
esri-icon-notice-round
esri-icon-notice-triangle
esri-icon-home
esri-icon-locate
esri-icon-expand
esri-icon-collapse
esri-icon-layer-list
esri-icon-basemap
esri-icon-globe
esri-icon-applications
esri-icon-arrow-up-circled
esri-icon-arrow-down-circled
esri-icon-arrow-left-circled
esri-icon-arrow-right-circled
esri-icon-minus-circled
esri-icon-plus-circled
esri-icon-add-attachment
esri-icon-attachment
esri-icon-calendar
esri-icon-close-circled
esri-icon-browser
esri-icon-collection
esri-icon-comment
esri-icon-configure-popup
esri-icon-contact
esri-icon-dashboard
esri-icon-deny
esri-icon-description
esri-icon-directions
esri-icon-directions2
esri-icon-documentation
esri-icon-duplicate
esri-icon-review
esri-icon-environment-settings
esri-icon-error
esri-icon-error2
esri-icon-experimental
esri-icon-feature-layer
esri-icon-filter
esri-icon-grant
esri-icon-group
esri-icon-key
esri-icon-labels
esri-icon-tag
esri-icon-layers
esri-icon-left-arrow
esri-icon-right-arrow
esri-icon-link-external
esri-icon-link
esri-icon-loading-indicator
esri-icon-maps
esri-icon-marketplace
esri-icon-media
esri-icon-media2
esri-icon-menu
esri-icon-mobile
esri-icon-phone
esri-icon-navigation
esri-icon-pan
esri-icon-printer
esri-icon-pie-chart
esri-icon-chart
esri-icon-line-chart
esri-icon-question
esri-icon-resend-invitation
esri-icon-rotate
esri-icon-save
esri-icon-settings
esri-icon-settings2
esri-icon-share
esri-icon-sign-out
esri-icon-support
esri-icon-user
esri-icon-time-clock
esri-icon-trash
esri-icon-upload
esri-icon-download
esri-icon-zoom-in-magnifying-glass
esri-icon-search
esri-icon-zoom-out-magnifying-glass
esri-icon-locked
esri-icon-unlocked
esri-icon-favorites
esri-icon-compass
esri-icon-down
esri-icon-up
esri-icon-chat
esri-icon-dock-bottom
esri-icon-dock-left
esri-icon-dock-right
esri-icon-organization
esri-icon-north-navigation
esri-icon-locate-circled
esri-icon-dial
esri-icon-polygon
esri-icon-polyline
esri-icon-visible
esri-icon-non-visible
esri-icon-link-vertical
esri-icon-unlocked-link-vertical
esri-icon-link-horizontal
esri-icon-unlocked-link-horizontal
esri-icon-swap
esri-icon-cta-link-external
esri-icon-reply
esri-icon-public
esri-icon-share2
esri-icon-launch-link-external
esri-icon-rotate-back
esri-icon-pan2
esri-icon-tracking
esri-icon-expand2
esri-icon-arrow-down
esri-icon-arrow-up
esri-icon-hollow-eye
esri-icon-play-circled
esri-icon-volume-off
esri-icon-volume-on
esri-icon-bookmark
esri-icon-lightbulb
esri-icon-sketch-rectangle
esri-icon-north-navigation-filled
esri-icon-default-action
esri-icon-undo
esri-icon-redo
esri-icon-cursor
esri-icon-cursor-filled
esri-icon-measure-line
esri-icon-measure
esri-icon-measure-area
esri-icon-legend
esri-icon-sliders
esri-icon-sliders-horizontal
esri-icon-cursor-marquee
esri-icon-lasso
esri-icon-elevation-profile
esri-icon-line-of-sight
esri-icon-slice
esri-icon-zoom-to-object
esri-icon-urban-model
esri-icon-measure-building-height-shadow
esri-icon-partly-cloudy