Skip to content

The Entity Icon tool

1.0.0 · Output

The Entity Icon tool displays the Home Assistant Entity Icon.

Basic usage

If no icon is specified in the entities configuration, the icon specified by Home Assistant is used

The Entity Icon tool needs a center position, size and alignment.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- type: 'icon'              # tooltype is 'icon'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    icon_size: 10           # Relative size of 10 (em)
    align: center           # Align (center, end, start)
  icon: mdi:dots-vertical   # Specify icon in tool
  styles:
    icon:
      fill: var(--primary-text-color)

The Entity Icon tool fetches the icon from the entity_index. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- type: 'icon'              # tooltype is 'icon'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    icon_size: 10           # Relative size of 10 (em)
    align: center           # Align (center, end, start)
  entity_index: 0           # connect to state of entity 0
  styles:
    icon:
      fill: var(--primary-text-color)

The Entity Icon tool can have it's entity icon overruled by the tool.

From example view-sake2.yml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
- type: icon
  position:
    cx: 10
    cy: 10
    align: center
    icon_size: 15
  entity_index: 0
  icon: mdi:dots-vertical   # Overwrite icon from entity: use menu icon
  user_actions:
    tap_action:
      haptic: success
      actions:
        - action: more-info # display more-info popup when clicked
  styles:
    capture:
      opacity: 0
    icon:
      fill: var(--primary-text-color)

Styling

The Entity Icon tool has support for the following forms of styling:

Method Support Description
classes Using SAK or User defined class definitions
styles Using inline SVG and CSS styles

The Entity Icon tool is composed of a single object: "icon" and this is the selector for styling: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
- type: 'icon'
  position:
    cx: 50
    cy: 50
    icon_size: 10
    align: center
  entity_index: 0
  classes:
    icon:                   # icon selector
      <...>
  styles:
    icon:                   # icon selector
      <...>
Populair properties:

Property Does what? Example
fill Fill color fill: red sets fill to color red
color Fill color color: red sets fill to color red
opacity Opacity (stroke/fill) opacity: 0.7 sets the opacity of text to 70%

Haptics

See: https://companion.home-assistant.io/docs/integrations/haptics/ for devices that support haptics

The tool supports haptic feedback through user_actions/ tap_action definition

Action Haptic Description
Click haptic Uses the haptic property defined in the user_actions definition of the tool. If not specified, a default of medium is used 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  tools:
    - type: icon
      position:
        cx: 10
        cy: 10
        align: center
        icon_size: 15
      entity_index: 0
      user_actions:
        tap_action:
          haptic: success
          actions:
            - action: more-info

Possible values for haptic feedback:

Haptic Description
success Indicates that a task or action has completed.
warning Indicates that a task or action has produced a warning of some kind.
failure Indicates that a task or action has failed.
light Provides a physical metaphor that complements the visual experience.
medium Provides a physical metaphor that complements the visual experience.
heavy Provides a physical metaphor that complements the visual experience.
selection Indicates that the selection is actively changing.

Animations

The Entity Icon tool has support for the following forms of animations:

Method Support Description
colorstops List of state values to set the color
colorlists Using a colorlist definition
animations Operator state based animations with class/style styling