🔹 Card-mod - Super-charge your themes!

[KTibow (Kendell R)]

Go download this:
https://github.com/google/material-design-icons/blob/96206ade0e8325ac4c4ce9d49dc4ef85241689e1/font/MaterialIcons-Regular.ttf?raw=true
Then see this:

Use TTF in Lovelace

For a lovelace clock card I would like to use an LCD TTF font file I have here: /local/fonts/DJB Get Digital.ttf Is this possible? Current card config: type: markdown style: | ha-card { padding-top: 18px; border: solid 2px var(--primary-color); } h1 { text-align: center; font-size: 6em; margin-bottom: 0px; } h2 { text-align: center; } content: | # {{ states("sensor.time") }} ## {{ states("sensor.date") }}

Then test out this theme file:

slate:
  card-mod-theme: slate
  card-mod-root-yaml: |
    .: |
        mwc-icon-button[slot="trigger"]::after {
            font-size: 22px;
            height: 20px;
            width: 200px;
            margin-left: 0px;
            margin-right: 0px;
            content: "oldhere";
            position: absolute !important;
            top: 14px;
            right: 0px;
        }
        mwc-icon-button[slot="trigger"]::before {
            content: "done";
            font-size: 22px;
            height: 20px;
            width: 200px;
            margin-left: 0px;
            margin-right: 25px;
            position: absolute !important;
            top: 14px;
            right: 0px;
            font-family: Material Icons;
        }

Increase the last margin-right if you need to.