🇺🇦 Українська | ru Русский | 🇿🇦 Afrikaans | 🇸🇦 العربية | 🇧🇬 Български | 🇧🇩 বাংলা | 🇧🇦 Bosanski | ca Català | 🇨🇿 Čeština | cy Cymraeg | 🇩🇰 Dansk | 🇩🇪 Deutsch | 🇬🇷 Ελληνικά | eo Esperanto | 🇪🇸 Español | 🇪🇪 Eesti | eu Euskara | 🇮🇷 فارسی | 🇫🇮 Suomi | fy Frysk | 🇫🇷 Français | 🇮🇪 Gaeilge | gl Galego | 🇨🇭 Schwiizerdütsch | 🇮🇱 עברית | 🇮🇳 हिन्दी | 🇭🇷 Hrvatski | 🇭🇺 Magyar | 🇦🇲 Հայերեն | 🇮🇩 Indonesia | 🇮🇸 Íslenska | 🇮🇹 Italiano | 🇯🇵 日本語 | 🇬🇪 Kartuli | 🇰🇷 한국어 | 🇱🇺 Lëtzebuergesch | 🇱🇹 Lietuvių | 🇱🇻 Latviešu | 🇲🇰 Македонски | 🇮🇳 മലയാളം | 🇳🇴 Norsk Bokmål | 🇳🇱 Nederlands | 🇳🇴 Norsk Nynorsk | 🇵🇱 Polski | 🇵🇹 Português | 🇧🇷 Português (BR) | 🇷🇴 Română | 🇸🇰 Slovenčina | 🇸🇮 Slovenščina | 🇦🇱 Shqip | 🇷🇸 Српски | 🇷🇸 Srpski | 🇸🇪 Svenska | 🇮🇳 தமிழ் | 🇮🇳 తెలుగు | 🇹🇭 ภาษาไทย | 🇹🇷 Türkçe | 🇵🇰 اُردُو | 🇻🇳 Tiếng Việt | 🇨🇳 简体中文 | 🇹🇼 繁體中文
Home Assistant lets you use any MDI icon, but not every icon has an
-offvariant. As a result, a device may already be off while its icon still looks active. This plugin automatically adds an MDI-style slash to inactive entities when no native off icon is available.
The plugin is designed so that the added slash looks like a native part of Home Assistant:
- works with standard Tile cards without replacing them, preserving their native appearance, behavior, colors, sizes, and interactions;
- also supports 🍄
Mushroom Template Card; the card must have anentityconfigured so the plugin can determine its state; - modifies only icons that have already been rendered and only when no native
-offvariant is available; - can optionally add a faint circular background when the native background is missing;
- does not change entity states or interfere with device operation.
ℹ️ What is HACS and how do I install it?
🚀 Try adding the repository using this link. If this mode is supported in your HA and it works, click Add in the window that opens, then click Download in the bottom-right corner. If everything works, installation is complete and you can skip the remaining installation steps. Go directly to Configuration.
It may take months for the plugin to be added to the default HACS catalog (we are waiting), so first add this repository to HACS manually:
- Open HACS.
- Open the menu in the upper-right corner and select Custom repositories.
- Add this repository:
https://github.com/LanKing/ha-mdi-off-fallback
- Select Dashboard as the type and click Add.
Adding a repository under Custom repositories only makes the plugin available in HACS. The plugin itself is installed separately with the Download button.
- Search HACS for:
MDI Off Fallbackand open it. - Click Download and confirm the installation.
- When the download is complete, reload Home Assistant while clearing the browser cache.
- Download
ha-mdi-off-fallback.js. - Copy the file to
/config/www/ha-mdi-off-fallback.js. - Open Resources or navigate there manually in Home Assistant: Settings → Dashboards → ⋮ → Resources.
- Click Add resource.
- Enter
/local/ha-mdi-off-fallback.jsin the URL field. - Select JavaScript Module and click Create.
- Reload Home Assistant while clearing the browser cache.
Custom configuration is optional. Without a custom file, the plugin uses its built-in values:
By default, the following states are treated as inactive:
| Entity domain | Inactive states |
|---|---|
light |
off |
switch |
off |
fan |
off |
climate |
off |
media_player |
off |
cover |
closed |
humidifier |
off |
water_heater |
off |
siren |
off |
The following settings are also used:
{
"faint_background_when_missing": false,
"faint_background_opacity": 0.2,
"debug": false
}To define your own rules, create this file:
/config/www/ha-mdi-off-fallback.config.json
Example:
{
"states": {
"light": ["off"],
"switch": ["off"],
"fan": ["off"],
"climate": ["off"],
"media_player": ["off"],
"cover": ["closed"],
"humidifier": ["off"],
"water_heater": ["off"],
"siren": ["off"],
"remote": ["off"]
},
"faint_background_when_missing": false,
"faint_background_opacity": 0.2,
"debug": false
}The configuration is stored separately from the plugin files managed by HACS, so plugin updates will not overwrite it.
When the custom configuration contains a states object, it completely replaces the built-in list. The plugin will only consider the explicitly listed domains and states.
{
"states": {
"light": ["off"],
"cover": ["closed"]
}
}In this example, the slash will only be applied to light and cover. The built-in rules for switch, fan, climate, and all other domains will not be used.
To return to the built-in list, remove states from the configuration or delete the configuration file.
The other settings are independent: when a setting is omitted, its built-in value remains in effect.
Some MDI icons are visually off-center. After a slash is added, they can look unbalanced when there is no circular background to frame them.
This bothered my sense of visual order, so the plugin includes an optional setting that draws a faint circle behind inactive icons when Home Assistant does not provide one.
This option is disabled by default because the circle has a meaning in the Home Assistant interface: on a Tile card, it normally indicates that clicking the icon performs a separate action from clicking the rest of the card. Adding a circle purely for visual alignment therefore changes that visual semantics.
You can still enable the background if you prefer the more balanced appearance:
{
"faint_background_when_missing": true
}When enabled, the plugin only adds the background where Home Assistant does not already render one.
You can also adjust its opacity:
{
"faint_background_opacity": 0.2
}Choose whichever behavior matters more for your dashboard: preserving Home Assistant's native interaction cues or keeping slashed icons visually centered.
haMdiOffFallback.configure() follows the same rules.
A supplied states object completely replaces the current list:
haMdiOffFallback.configure({
states: {
light: ["off"],
cover: ["closed"],
remote: ["off"]
},
debug: true
})When states is omitted, the current list remains unchanged:
haMdiOffFallback.configure({
debug: true
})Settings applied through configure() remain active only in the current tab until the page is reloaded. Use the JSON file for persistent configuration.
After editing the JSON file, reload the configuration without reloading the page:
haMdiOffFallback.reloadConfig()View the active configuration:
haMdiOffFallback.getConfig()MIT — contributions are welcome.