# IconGizmo

Class · extends [`Gizmo`](https://api.playcanvas.com/engine/classes/Gizmo.md) · category: Gizmo

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/gizmo/icon-gizmo.js#L47

Draws an icon at each attached entity with nothing else to see, such as a light, camera or sound.
Entities with an enabled render, model, sprite or element component show none, and a disabled
component still shows its icon. Clicking an icon
fires [IconGizmo.EVENT_ICONSELECT](https://api.playcanvas.com/engine/classes/IconGizmo.md#event_iconselect). The icons are [IconGizmo#iconSize](https://api.playcanvas.com/engine/classes/IconGizmo.md#iconsize) CSS pixels
square.

Use a layer that keeps the scene depth, so hidden icons use the `occluded` color.

```javascript
const layer = Gizmo.createLayer(app, 'Overlays', undefined, true);
const gizmo = new IconGizmo(cameraComponent, layer);
gizmo.attach([lightEntity, soundEntity]);
gizmo.on('icon:select', entity => select(entity));
```

Relevant Engine API examples:

- [Icon Gizmo](https://playcanvas.github.io/#/gizmos/icon)
- [Editor](https://playcanvas.github.io/#/misc/editor)

## Constructors

### constructor

```ts
new IconGizmo(camera: CameraComponent, layer: Layer)
```

Creates a new IconGizmo object.

**Parameters**

- `camera` ([`CameraComponent`](https://api.playcanvas.com/engine/classes/CameraComponent.md)): The camera component.
- `layer` ([`Layer`](https://api.playcanvas.com/engine/classes/Layer.md)): The render layer.

**Example**

```ts
const gizmo = new IconGizmo(camera, layer);
```

## Properties

### useLightColor

```ts
useLightColor: boolean = false
```

Whether to draw light icons in the light color. Defaults to false.

## Accessors

### iconSize

```ts
get iconSize(): number
set iconSize(value: number)
```

Gets the icon size in CSS pixels.

### theme

```ts
get theme(): IconGizmoTheme
```

Gets the current theme for the gizmo.

## Methods

### _updateRotation

```ts
_updateRotation(): void
```

The icons face the camera in world space.

### _updateScale

```ts
_updateScale(): void
```

The icons keep their size on screen themselves.

### destroy

```ts
destroy(): void
```

Destroys the gizmo and its icons.

### getIconNode

```ts
getIconNode(meshInstance: MeshInstance): GraphNode | null
```

Gets the entity whose icon a mesh instance draws, such as one a [Picker](https://api.playcanvas.com/engine/classes/Picker.md) returns, so
an app can pick icons with the rest of its scene.

**Parameters**

- `meshInstance` ([`MeshInstance`](https://api.playcanvas.com/engine/classes/MeshInstance.md)): The mesh instance.

**Returns** [`GraphNode`](https://api.playcanvas.com/engine/classes/GraphNode.md) `| null`: The entity, or null when the mesh instance draws no icon.

### prerender

```ts
prerender(): void
```

Places the icons of the attached entities.

### setTheme

```ts
setTheme(partial: Partial<IconGizmoTheme>): void
```

Sets the theme or partial theme for the gizmo.

**Parameters**

- `partial` (`Partial<`[`IconGizmoTheme`](https://api.playcanvas.com/engine/interfaces/IconGizmoTheme.md)`>`): The partial theme to set.

**Example**

```ts
gizmo.setTheme({ occluded: new Color(1, 1, 1, 0.5) });
```

## Events

### EVENT_ICONSELECT

```ts
static EVENT_ICONSELECT: string = 'icon:select'
```

Fired when the icon of an entity is clicked.

**Example**

```ts
const gizmo = new pc.IconGizmo(camera, layer);
gizmo.on('icon:select', (entity) => {
    console.log(`Clicked the icon of ${entity.name}`);
});
```

## Inherited from [Gizmo](https://api.playcanvas.com/engine/classes/Gizmo.md)

- `protected _app: AppBase`
- `protected _camera: CameraComponent`
- `protected _coordSpace: GizmoSpace = 'world'`
- `protected _device: GraphicsDevice`
- `protected _handles: EventHandle[] = []`
- `protected _layer: Layer`
- `protected _mouseButtons: [boolean, boolean, boolean]`
- `protected _renderUpdate: boolean = false`
- `protected _scale: number = 1`
- `intersectShapes: Shape[] = []`
- `nodes: GraphNode[] = []`
- `preventDefault: boolean = true`
- `root: Entity`
- `protected get _requiresNodes(): boolean`
- `get camera(): CameraComponent` · `set camera(camera: CameraComponent)`
- `protected get cameraDir(): Vec3`
- `get coordSpace(): GizmoSpace` · `set coordSpace(value: GizmoSpace)`
- `get enabled(): boolean` · `set enabled(state: boolean)`
- `protected get facingDir(): Vec3`
- `get layer(): Layer` · `set layer(layer: Layer)`
- `get mouseButtons(): [boolean, boolean, boolean]`
- `get size(): number` · `set size(value: number)`
- `protected _createRay(mouseWPos: Vec3): Ray`
- `protected _getScreenScale(pos: Vec3): number`
- `protected _updatePosition(): void`
- `attach(nodes?: GraphNode | GraphNode[]): void`
- `detach(): void`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `update(): void`
- `static createLayer(app: AppBase, layerName?: string, layerIndex?: number, depth?: boolean): Layer`
- `static EVENT_NODESATTACH: string = 'nodes:attach'`
- `static EVENT_NODESDETACH: string = 'nodes:detach'`
- `static EVENT_POINTERDOWN: string = 'pointer:down'`
- `static EVENT_POINTERMOVE: string = 'pointer:move'`
- `static EVENT_POINTERUP: string = 'pointer:up'`
- `static EVENT_POSITIONUPDATE: string = 'position:update'`
- `static EVENT_RENDERUPDATE: string = 'render:update'`
- `static EVENT_ROTATIONUPDATE: string = 'rotation:update'`
- `static EVENT_SCALEUPDATE: string = 'scale:update'`