Skip to content

v.0.5.0: Icons from everywhere!
Compare
Choose a tag to compare
@usernein usernein released this 06 Jul 18:19
· 2 commits to master since this release
v.0.5.0
95bd92e

This release brings the freedom to choose icons from anywhere you can, not only from MDI, without using svg paths in custom_icons.

Before this release, to customize the icon of any button, you'd need to either search and use Material Design Icons or define custom icons with their svg paths, like this:

custom_keys:
  input_tv:
    icon: "mdiTelevisionBox"
    key: KEY_TV
custom_sources:
  hbomax:
    icon: hbo
    source: HBO Max
custom_icons:
  hbo: >- # From SimpleIcons
    M7.042 16.896H4.414v-3.754H2.708v3.754H.01L0
    7.22h2.708v3.6h1.706v-3.6h2.628zm12.043.046C21.795 16.94 24 14.689 24
    11.978a4.89 4.89 0 0 0-4.915-4.92c-2.707-.002-4.09 1.991-4.432
    2.795.003-1.207-1.187-2.632-2.58-2.634H7.59v9.674l4.181.001c1.686 0
    2.886-1.46 2.888-2.713.385.788 1.72 2.762 4.427 2.76zm-7.665-3.936c.387 0
    .692.382.692.817 0 .435-.305.817-.692.817h-1.33v-1.634zm.005-3.633c.387 0
    .692.382.692.817 0 .436-.305.818-.692.818h-1.33V9.373zm1.77
    2.607c.305-.039.813-.387.992-.61-.063.276-.068 1.074.006
    1.35-.204-.314-.688-.701-.998-.74zm3.43 0a2.462 2.462 0 1 1 4.924 0 2.462
    2.462 0 0 1-4.925 0zm2.462 1.936a1.936 1.936 0 1 0 0-3.872 1.936 1.936 0 0 0
    0 3.872Z

See the "mdiTelevisionBox"? That's the name of the JS var for that icon, which was needed for the way this card was rendering icons.
Now you can just pass mdi:television-box instead, as you normally do everywhere in HASS.

And now you can also use any other available icon pack for HASS, like fontawesome:

custom_keys:
  power:
    icon: fas:heart

About the HBO Max example, now we can get rid of using custom_icons for it, thanks to this SimpleIcons integration:

custom_sources:
  hbomax:
    icon: si:hbo
    source: HBO Max

So that big example in the beginning becomes this:

custom_keys:
  input_tv:
    icon: mdi:television-box
    key: KEY_TV
custom_sources:
  hbomax:
    icon: si:hbo
    source: HBO Max

Breaking changes

If you defined any custom button using the old format of mdi icons, you need to rename them to the new format.
e.g. "mdiPower" -> "mdi:power", "mdiTelevisionGuide" -> "mdi:television-guide"
Otherwise, the icons won't be recognized

Full Changelog: v0.4.2...v.0.5.0

Assets 2
Loading