Aprende todo lo que necesitas saber para personalizar iconos en Home Assistant y darle un toque a tu panel de control!
Índice
Explora tus opciones
Como ya sabrás, HA te permite elegir el icono asignado a tus entidades o tarjetas (algo muy atractivo a la hora de personalizar tu panel). De forma oficial y nativa, podemos usar todos los iconos de la librería Material Design Icons escribiendo ‘mdi:’ y a continuación el código del icono (por ejemplo, ‘mdi:heart’).
Personalmente, cuando quiero personalizar iconos en Home Assistant, primero entro en la web de MDI y exploro qué iconos están disponibles, ya que es muy fácil encontrarlos con el buscador o usando las categorías. Cuando alguno me gusta, simplemente tengo que fijarme en el nombre que aparece debajo para añadirlo al prefijo ‘mdi:’.
Usa iconos y estilos condicionales
Si llevas tiempo con nosotros, sabrás que me encanta que el panel de control cambie en función de lo que sucede. Hablando de iconos, me gusta alterar su color para que me den información (por ejemplo, que el color del icono de la lavadora cambie a rojo cuando termina), o incluso cambiar el icono (por ejemplo, en función de la condición meteorológica).
Para conseguir estos efectos sólo tienes que aplicar un pequeño ‘template’ (en tarjetas que los admitan), que evalúe una condición y en función de ello genere un resultado u otro. Por ejemplo, con este código y Mushroom Cards puedes crear una tarjeta en la que, si es de día, el icono será un sol amarillo. En cambio, si es de noche saldrá una luna blanca.
type: custom:mushroom-template-card
primary: Hola aguacater@!
secondary: ¿Cómo estás?
icon: >
{% if states('sun.sun') == "below_horizon" %}
mdi:circle
{% elif states('sun.sun') == "above_horizon" %}
mdi:white-balance-sunny
{% endif %}
icon_color: |
{% if states('sun.sun') == "below_horizon" %}
white
{% elif states('sun.sun') == "above_horizon" %}
yellow
{% endif %}
Esto es un pequeño ejemplo, pero podrías adaptarlo a cualquier entidad y situación para que sepas lo que está pasando sólo con mirar tus tarjetas. Si te interesa saber más sobre el tema, te recomiendo que veas nuestro taller sobre cómo crear tarjetas personalizadas.
Dale movimiento a tus iconos
Otra cosa que me encanta hacer al personalizar iconos en Home Assistant es animarlos. Combinado con lo anterior, es la forma perfecta de dejar que mis tarjetas llamen mi atención cuando hace falta. La lógica a seguir es la misma que en el apartado anterior, aunque en este caso vamos a necesitar Card Mod para alterar otras propiedades de los iconos, y un poco de ayuda 😅.
En esencia, para dar movimiento a un icono lo que hacemos es alterar su tamaño y su posición, creando una animación (por ejemplo, una campana sonando). Esto no es algo tan intuitivo, pero hay efectos creados por la comunidad que puedes utilizar fácilmente. Por ejemplo, este es el código para crear el efecto de la lavadora en funcionamiento.
card_mod:
style: |-
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
Añade más iconos
Otro recurso que no te puede faltar a la hora de personalizar iconos en Home Assistant es tener la posibilidad de añadir iconos adicionales, cuando no encuentras el que estás buscando. Si te encuentras en este caso, hay varias formas de solucionarlo:
- Si quieres contribuir a la biblioteca de MDI, puedes enviar tus iconos para que lo incluyan siguiendo las directrices que se establecen en la documentación. De esta forma no sólo estará disponible para ti, sino que podrá usarlo cualquier persona con Home Assistant.
- Si quieres mostrar imágenes personalizadas en lugar de iconos, basta con que incluyas la ruta a la imagen en el campo «Imagen (sustituirá al icono)». Puedes incluir una URL de internet, o guardarla en el almacenamiento interno de HA, dentro de ‘config/www’
- Además, a través de HACS puedes añadir «packs» de iconos adicionales. Esta puede ser la opción más rápida y cómoda si simplemente estás buscando un icono en concreto. En mi caso voy a añadir el pack de Fontawesome, pero las instrucciones son parecidas a otros packs como Simple Icons o Brand Icons.
- Entra en HACS y busca «Fontawesome» (o el nombre del pack que quieras instalar). Pulsa en «Descargar» y reinicia Home Assistant.
- Ve a Configuración > Dispositivos y servicios > Añadir integración > Fontawesome icons (o el nombre de tu pack).
- Reinicia de nuevo HA y borra la caché de tu navegador. También tendrás que forzar la detección de la aplicación en tus dispositivos móviles y borrar la caché. Si no realizas este paso, lo más probable es que no te aparezcan los iconos.
- De la misma forma que te expliqué en el primer apartado, sólo tienes que entrar a la galería correspondiente (en este caso, Fontawesome) y seleccionar el icono que te interese para copiar el identificador correspondiente. Luego tendrás que indicarlo, utilizando el prefijo correspondiente (que en el caso de Fontawesome puede ser ‘fas:’, ‘far:’ o ‘fab:’).
