Skip to content

The Entity Icon tool

1.0.0 · Output

The Entity Icon tool displays the Home Assistant Entity Icon.

Basic usage

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

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
Back to top