Icons

Enabling Material Design Icons

The mqtt-control-map comes with material design icons (mdi). To enable mdi in your config, you just need to import it.

import * as icons from "@mdi/js";

Loading svg

Currently the mqtt-control-map only supports the svg format. To load an svg icon, simply call the svg function with an svg icon string.

import { svg } from "config/icon";

const Config = {
// ...
  icon: svg("M...Z"),
// ...
};

When using mdi, you can directly import the icons

import { svg } from "config/icon";
import * as icons from "@mdi/js";

const Config = {
// ...
  icon: svg(icons.mdiPower),
// ...
};

Icon Function

Icons support a few useful functions that can be chained onto it:

• flip() flips the icon horizontally
• flipV() flips the icon vertically
• rotate(n: number) rotates the icon by n degrees
• color(c: Color) gives the icon the color c
• color(f: State => Color) allows you to color the icon depending on the current mqtt state

Examples:

svg(icons.mdiLedOn).flipV().color(rainbow).rotate(10)
svg(icons.mdiPower).color(({lampState}) => lampState === "on" ? hex("#00FF00") : hex("#000000"))

Change the icon depending on the state

To change icons depending on the current mqtt state the config/icon module provides the function withState. Given a function that returns an icon, you can change the icon based on the state.

import { svg, withState } from "config/icon";
import * as icons from "@mdi/js";

const Config = {
// ...
  icon: withState(({kitchenLamp}) => kitchenLamp === "on" ? svg(icons.mdiLedOn).color(hex("#00FF00")) : svg(icons.mdiLedOff)).flipV(),
// ...
};