Place text or icon on LCARS borders?

[smugleafdev]

In this LCARS screenshot, note how the left side has labels in the border such as "03-975683".

I would like to be able to do something similar, whether it's text or an icon. If that can be done simply with card-mod, I would like to see the code for it, and it would be a nice addition to the documentation. If that's not possible right now, then this can be labeled an enhancement.

[smugleafdev]

Okay so this was a colossal PITA but I got it working with card-mod CSS shenanigans. I don't recommend it. I had to add this font as a resource (stylesheet): https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css

And then this CSS in Lovelace:

  - type: markdown
    card_mod:
      class: middle
      style: |
        ::before {
          font-family: 'Material Design Icons';
          content: "\F01AA";
          font-size: 24px;
          position: absolute;
          left: -30px;
          top: 10px;
          color: #00b3ff;
        }

It's not right but it sure does work.

Ideally this LCARS theme could maybe make that significantly easier, but for right now this will do.

[th3jesta]

Nicely done. I'll put this in as an open enhancement, though I'm not sure there's a much better way to accomplish what you wanted, except maybe introducing class that does most of this and then you just add a style via card-mod to provide the content:. The only surefire way I know of to add content to the UI is using pseudo elements, as you have done with ::before.

That said, I may just add this to the list of tips and tricks in the documentation.