Support for Material Design Icons

[magnusoverli]

Is it possible to support icons from Material Design in the card heading, alongside the already supported Emoji's?

[steven-hack]

I've created a PR with a possible solution for this problem, hopefully that was fine.

[nervetattoo]

This is planned and I have a different idea for the solution @IIStevowII, which is why I've not done anything with your PR. Sorry for the lack of feedback on it! I want to support headings broken into fragments that gets bundled. I've played around with the implementation locally but its not ready to share anywhere as there's some challenges I need to get around. My intention is to support something like this:

heading: ['mdi:account', 'Users']
heading:
  - mdi:account
  - Users
  - mdi:account

I'm also playing with a more esoteric and wild format that allow you to show fragments only for certain states:

heading:
  - mdi:sofa(entities.0.state.on)
  - Living room

This format even attempts to control the icon rendering even further by assigning classes for CSS styling that you can define in your theme:

heading:
  - mdi:sofa(active=entities.0.state.on,locked=state.off)
  - Living room

I need to further explore if the declarative approach will support the different scenarios of users or if a templated approach makes more sense. I would love input to help shape this.

[steven-hack]

No problem at all. Do you have a visual mock-up of the bundled headings? I can't really picture this / see the use of it yet. Or would the use case purely be for combined use with the conditonals, to show a different heading depending on certain conditions?

[nervetattoo]

The basic examples would just be <icon> Users <icon> on a line. Magic string parsing for icons and the concat all the heading fragments. So just a real icon based solution for what is now hacked with emojis.

The convoluted fragments have a syntax that can be described more or less like:

<icon>[ <logic-start> [<assignment-expression n..nx> | <conditional-expression>] <logic-end> ]

Basic syntax

expr	example
icon	mdi:sofa
logic-start	(
assignment-expression	active=entities.0.state.on
conditional-expression	entities.0.state.on
logic-end	)

Breaking down assignment-expression:

<target-classname><operator> [ <lookup-key><lookup-separator> ]*<lookup-value-expectation>

Ok, so thats a bit hard to grasp so let me try to break down the example into expression fragments

expr	example
target-classname	active
operator	=
lookup-key	entities
lookup-separator	.
lookup-key	0
lookup-separator	.
lookup-key	state
lookup-separator	.
lookup-value-expectation	on

Use cases

Since you have X entities in the card you need to manually specify which entities state/attributes to apply onto the fragments in the heading if you want to have for example an icon with color depending on entity states. This allow you to define an arbitrary amount of icons with class names derived from state or attributes on any entity in the card in a succinct (but hard to learn) way.

• Icon for a room that has an active colors if the main light is on
• Card for public transportation that displays an icon of a running person if the bus leaves in less than X minutes
• Display one person icon for each person present at home

I guess I take this as a playground to perhaps come up with a syntax for declarative magic strings in yaml that can be used also by other things around HA. What I've envisioned could also be defined as pure yaml objects/lists but would result in huge configs.

heading:
  - type: icon
    value: mdi:sofa
    conditional:
      if: entities.1.state
      equals: on
    classes:
      active:
        if: entities.0.state
        equals: on
  - type: text
     value: Living room

Phew, hope some of this made some sort of sense 😌

[aptonline]

I was just about to open a request for this myself, glad its on the roadmap :)