# Class Icon

##### Index

### Constructors

constructor

### Properties

iconId
id
isPickable
size
styleId
visible

### Accessors

color
isOccluded
parent
position

### Methods

detach
intersect

## Constructors

### constructor

- new Icon(
  id: string,
  iconId: number,
  styleId: number,
  size: number,
  position: Vector3,
  color: Color4,
  visible?: boolean,
  isPickable?: boolean,
  ): Icon

  Creates a icon to use in 3D. The icon need to be attached to a IconHandler to be renderd.

  #### Parameters

  - id: string

    Your own string id.

  - iconId: number

    The icon index in the icon texture atlas. Fist icon has iconId 0.

  - styleId: number

    The styleId selects a icon style. First style has styleId 0.

  - size: number

    Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of IconHandler.setIconAtlas is unscaled.

  - position: Vector3

    Contains the 3D-coordinate where the icon is rendered.

  - color: Color4

    Custom color RGB, the A channel is used for icon size. If size is 0, the icon is not visible. If RGB is 1.0 only the color from icon texture pixels will be used for coloring. Other values are mixed in.

  - visible: boolean = true

    Defaults to `true`

  - isPickable: boolean = false

    Whether Icon can be found in a pick operation or not. Defaults to `true`.

  #### Returns Icon

  #### Example

      // A Icon needs to be attatched to a IconHandler to be renderd in the 3D-scene.
      const iconHandler = new IconHandler(api);
      // Add a icon atlas to use for all icons. Provide the babylonTextre, the total icon count (16), the amount of icons in a group (4) and if the texture use the alpha channel (true).
      iconHandler.setIconAtlas(await getTexture('./icon.png'), 16, 4, true);
      // Add a array of icons to be renderd.
      iconHandler.attach([
      new Icon(
         "someId_1",
         0, // Use the first icon form the 4X4 icon atlas (first row in icon atlas).
         2, // Use the third style index, in this case there is 4 icons in a group in the texture atlas.
         1, // size
         new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
         new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
         true // This makes the icon pickable.
      ),
      new Icon(
         "someId_2",
         1, // Use the second icon row form the 4X4 icon atlas.
         0, // Use the first style of the second icon.
         1, // size
         new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
         new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
         true // This makes the icon pickable.
      )
      ]);

  #### Example

        // A common use for icons is to enable a user to click on them and then perform some functionality.
        // Here is an example of how to implement this with the {@link onPointerObservable}.
        // For this to work the icons property isPickable needs to be set to true.
        api.onPointerObservable.add((eventData) => {
            const pointerButtonInfo = eventData.twinfinity.button(PredefinedPointerButtonId.Main);
            // Only continue on main click button release.
            if (pointerButtonInfo.event !== 'up') {
                return;
            }
            // Run a pick metod to check what the cursor is abowe.
            const pick: PickResult = eventData.twinfinity.pick(true);
            // If a Icon is picked.
            if (pick.type === PickResultType.Icon) {
                const pickedIcon = pick.object;
                console.log(pickedIcon);
            }
        });

## Properties

### iconId

iconId: number

The icon index in the icon texture atlas. Fist icon has iconId 0.

### `Readonly` id

id: string

Your own string id.

### isPickable

isPickable: boolean = false

Whether Icon can be found in a pick operation or not. Defaults to `true`.

### size

size: number

Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of IconHandler.setIconAtlas is unscaled.

### styleId

styleId: number

The styleId selects a icon style. First style has styleId 0.

### visible

visible: boolean = true

Defaults to `true`

## Accessors

### color

- get color(): Color4

  Color of icon. If alpha is zero the icon will not be rendered.

  #### Returns Color4

### isOccluded

- get isOccluded(): boolean

  `true` if occluded, otherwise `false`. Only valid if IconHandler.occlusionCullingInterval `>= 0`. Otherwise it will always be `false`.

  #### Returns boolean

### parent

- get parent(): undefined | IconHandler

  IconHandler this Icon is attached to. See IconHandler.attach and IconHandler.detach.

  #### Returns undefined | IconHandler

  Parent IconHandler. `undefined` Icon as not yet been attached to a IconHandler.

### position

- get position(): Vector3

  Position of icon in world space.

  #### Returns Vector3

## Methods

### detach

- detach(): boolean

  Detach icon from its IconHandler if it is attached.

  #### Returns boolean

  `true` if icon was detached. Otherwise `false`. Happens when icon has no IconHandler.

### intersect

- intersect(pO: PickOptionRay): Intersection[]

  Perform intersection test against icon using a ray.

  #### Parameters

  - pO: PickOptionRay

    Ray to pick with

  #### Returns Intersection[]

  Intersection or empty array if no intersection