diff --git a/README.md b/README.md
index 5c8a574..3ac5eb1 100644
--- a/README.md
+++ b/README.md
@@ -141,7 +141,22 @@ The card uses the following CSS variables:
| --banner-card-heading-color-dark | var(--primary-text-color) | The card measures your bg color to figure out to use dark or light text color |
| --banner-card-heading-color-light | #fff | The card measures your bg color to figure out to use dark or light text color |
-## Example configurations
+## Examples
+
+_Using map_state to render a switch as a colored icon_
+
+```yaml
+- entity: switch.switch
+ name: Is it on?
+ domain: sensor
+ value: mdi:star
+ color: black
+ map_state:
+ "on":
+ color: yellow
+```
+
+_Basic examples_
```yaml
type: custom:banner-card
@@ -160,7 +175,9 @@ entities:
```yaml
type: custom:banner-card
-heading: "\U0001F6C1 Bathroom"
+heading:
+ - mdi:shower
+ - Bathroom
background: "#B0C2ED"
link: /lovelace/bathroom
entities:
diff --git a/src/index.js b/src/index.js
index 7bf9119..1fd2c13 100644
--- a/src/index.js
+++ b/src/index.js
@@ -245,10 +245,15 @@ class BannerCard extends LitElement {
`;
}
- renderValue({ icon, value, image, action, click }, fallback) {
+ renderValue({ icon, value, image, action, click, color }, fallback) {
if (icon || isIcon(value)) {
+ color = color ? `color: ${color}` : "";
return html`
-
+
`;
} else if (image === true) {
return html`
@@ -262,9 +267,9 @@ class BannerCard extends LitElement {
return fallback();
}
- renderDomainDefault({ value, unit, image, icon, name, size, onClick }) {
+ renderDomainDefault({ value, unit, name, size, onClick, ...data }) {
const htmlContent = this.renderValue(
- { icon, image, value, click: onClick },
+ { ...data, value, click: onClick },
() =>
html`
${value} ${unit}
@@ -278,9 +283,9 @@ class BannerCard extends LitElement {
`;
}
- renderCustom({ value, unit, action, image, icon, name, size, onClick }) {
+ renderCustom({ value, unit, action, name, size, onClick, ...data }) {
const htmlContent = this.renderValue(
- { icon, image, value, click: action },
+ { ...data, value, unit, click: action },
() => html`
${value} ${unit}