OpenLayers v4.0.1 API - Class: Icon

# Class: Icon

This documentation is for OpenLayers v4.0.1. The latest is v.

## ol.style.Icon

Set icon style for vector features.

#### new ol.style.Icon(opt_options)

src/ol/style/icon.js, line 24

  Name | Type | Description
  --- | --- | ---

  `options`

  Options.

  Name | Type | Description
  --- | --- | ---
  `anchor` | Array.<number> | undefined | Anchor. Default value is `[0.5, 0.5]` (icon center).
  `anchorOrigin` | ol.style.IconOrigin | undefined | Origin of the anchor: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`.
  `anchorXUnits` | ol.style.IconAnchorUnits | undefined | Units in which the anchor x value is specified. A value of `'fraction'` indicates the x value is a fraction of the icon. A value of `'pixels'` indicates the x value in pixels. Default is `'fraction'`.
  `anchorYUnits` | ol.style.IconAnchorUnits | undefined | Units in which the anchor y value is specified. A value of `'fraction'` indicates the y value is a fraction of the icon. A value of `'pixels'` indicates the y value in pixels. Default is `'fraction'`.
  `color` | ol.Color | string | undefined | Color to tint the icon. If not specified, the icon will be left as is.
  `crossOrigin` | null | string | undefined | The `crossOrigin` attribute for loaded images. Note that you must provide a `crossOrigin` value if you are using the WebGL renderer or if you want to access pixel data with the Canvas renderer. See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail.
  `img` | Image | HTMLCanvasElement | undefined | Image object for the icon. If the `src` option is not provided then the provided image must already be loaded. And in that case, it is required to provide the size of the image, with the `imgSize` option.
  `offset` | Array.<number> | undefined | Offset, which, together with the size and the offset origin, define the sub-rectangle to use from the original icon image. Default value is `[0, 0]`.
  `offsetOrigin` | ol.style.IconOrigin | undefined | Origin of the offset: `bottom-left`, `bottom-right`, `top-left` or `top-right`. Default is `top-left`.
  `opacity` | number | undefined | Opacity of the icon. Default is `1`.
  `scale` | number | undefined | Scale.
  `snapToPixel` | boolean | undefined | If `true` integral numbers of pixels are used as the X and Y pixel coordinate when drawing the icon in the output canvas. If `false` fractional numbers may be used. Using `true` allows for "sharp" rendering (no blur), while using `false` allows for "accurate" rendering. Note that accuracy is important if the icon's position is animated. Without it, the icon may jitter noticeably. Default value is `true`.
  `rotateWithView` | boolean | undefined | Whether to rotate the icon with the view. Default is `false`.
  `rotation` | number | undefined | Rotation in radians (positive rotation clockwise). Default is `0`.
  `size` | ol.Size | undefined | Icon size in pixel. Can be used together with `offset` to define the sub-rectangle to use from the origin (sprite) icon image.
  `imgSize` | ol.Size | undefined | Image size in pixels. Only required if `img` is set and `src` is not, and for SVG images in Internet Explorer 11. The provided `imgSize` needs to match the actual size of the image.
  `src` | string | Image source URI. Required.

### Extends

- ol.style.Image

### Methods

#### clone(){ol.style.Icon}

src/ol/style/icon.js, line 183

  Clones the style.

  ##### Returns:

  The cloned style.

#### getAnchor(){Array.<number>}

src/ol/style/icon.js, line 223

  Get the anchor point in pixels. The anchor determines the center point for the symbolizer.

  ##### Returns:

  Anchor.

#### getColor(){ol.Color}

src/ol/style/icon.js, line 269

  Get the icon color.

  ##### Returns:

  Color.

#### getImage(pixelRatio){Image|HTMLCanvasElement}

src/ol/style/icon.js, line 281

  Get the image icon.

  Name | Type | Description
  --- | --- | ---
  `pixelRatio` | number | Pixel ratio.

  ##### Returns:

  Image or Canvas element.

#### getOpacity(){number} inherited

src/ol/style/image.js, line 55

  Get the symbolizer opacity.

  ##### Returns:

  Opacity.

#### getOrigin(){Array.<number>}

src/ol/style/icon.js, line 322

  Get the origin of the symbolizer.

  ##### Returns:

  Origin.

#### getRotateWithView(){boolean} inherited

src/ol/style/image.js, line 65

  Determine whether the symbolizer rotates with the map.

  ##### Returns:

  Rotate with map.

#### getRotation(){number} inherited

src/ol/style/image.js, line 75

  Get the symoblizer rotation.

  ##### Returns:

  Rotation.

#### getScale(){number} inherited

src/ol/style/image.js, line 85

  Get the symbolizer scale.

  ##### Returns:

  Scale.

#### getSize(){ol.Size}

src/ol/style/icon.js, line 363

  Get the size of the symbolizer (in pixels).

  ##### Returns:

  Size.

#### getSnapToPixel(){boolean} inherited

src/ol/style/image.js, line 95

  Determine whether the symbolizer should be snapped to a pixel.

  ##### Returns:

  The symbolizer should snap to a pixel.

#### getSrc(){string|undefined}

src/ol/style/icon.js, line 354

  Get the image URL.

  ##### Returns:

  Image src.

#### load()

src/ol/style/icon.js, line 385

  Load not yet loaded URI. When rendering a feature with an icon style, the vector renderer will automatically call this method. However, you might want to call this method yourself for preloading or other purposes.

#### setOpacity(opacity) inherited

src/ol/style/image.js, line 169

  Set the opacity.

  Name | Type | Description
  --- | --- | ---
  `opacity` | number | Opacity.

#### setRotation(rotation) inherited

src/ol/style/image.js, line 190

  Set the rotation.

  Name | Type | Description
  --- | --- | ---
  `rotation` | number | Rotation.

#### setScale(scale) inherited

src/ol/style/image.js, line 201

  Set the scale.

  Name | Type | Description
  --- | --- | ---
  `scale` | number | Scale.