Eigene Icons in HA verwenden funktioniert nicht

Allgemein
1

Hallo zusammen.

Ich versuche ein eigenes Icon in HA zu verwenden. Ich versuche es mit einem *.png, und/oder einem *.svg. Beides funktioniert nicht und ich gehe davon aus, dass ich nicht korrekt referenziere.

Ich möchte das in der HACS Clooos - bubble-Card verwenden. und zwar möchte ich einen Zwischenschritt für das Shutter Icon.

Folgende Icon Stati sollen dargestellt werden:
Wenn ein Rollo vollständig geschlossen (0%) ist, wenn ein Rollo vollständig offen (100%) ist und wenn ein Rollo < 100% ist, soll jeweils ein anderes Icon angezeigt werden.

Mit diesem Syntax, bzw Code Snippet funktioniert das bereits:

${icon.setAttribute("icon", hass.states[entity].attributes.current_position < '1' ? 'mdi:window-shutter' : hass.states[entity].attributes.current_position > '99' ? 'mdi:window-shutter-open' : 'mdi:window-shutter-alert' )}

Allerdings möchte ich anstatt mdi:window-shutter-alert ein eigenes Icon verwenden.

Dazu habe mich entsprechend belesen und im Ordner www einen Ordner custom_icons erstellt. Hier habe ich das Icon window-tile-shutter.svg bzw auch window-tile-shutter.png hochgeladen, dann HA neugestartet und folgendermaßen referenziert:

/local/custom_icons/window-tile-shutter.svg

insgesamt also so:

${icon.setAttribute("icon", hass.states[entity].attributes.current_position < '1' ? 'mdi:window-shutter' : hass.states[entity].attributes.current_position > '99' ? 'mdi:window-shutter-open' : '/local/custom_icons/window-tile-shutter.svg' )}

Leider wird kein Icon angezeigt.

Da es mit den Systemeigenen Icons funktioniert, gehe ich davon aus, dass ich entweder falsch referenziere, oder mir eine Information zum Einbinden von eigenen Icons fehlt.

Würde mich über Hilfe freuen

2

Das sind entity_picture, keine icon.

3

Danke für deine Antwort. Leider sagt mir das nichts. Laut Bubble Card Dokumentation ist der Syntax so korrekt und funktioniert ja auch. Nur das Eigene Bild wird nicht geladen.

4

Bei custom:button-card ruft man ein Bild mit url("/local/ORDNER/bild.jpg") auf. Da Bubble Card ebenfalls JavaScript verwendet, würde ich es damit versuchen. Nur dass das unter icon laufen soll (und nicht entity_picture), kann ich mir nicht so ganz vorstellen (lass mich da aber gerne eines Besseren belehren, vielleicht bin ich von der Denke her zu sehr in custom:button-card drin).

5

Ich habe den Eindruck, dass ich hier als Anfänger noch etwas weiter vorne abgeholt werden müsste :slight_smile:
Kann das sein, dass es in HA grundsätzlich erstmal nicht möglich ist eigene Icons zu verwenden, solange die entsprechende Karte dies nicht ausdrücklich vorsieht?
Also einfach ein Bild in einem Ordner ablegen und dann darauf verweisen funtkioniert scheinbar Systemweit nicht. Warum ist das so schwierig?

Aus der Bubble Card Doku habe ich das hier her:

https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#available-variables-and-functions

Ist der Pfad denn so überhaupt korrekt?

/* SLANG - ändert das Icon je nach Zustand */
${icon.setAttribute("icon",
    hass.states[entity].attributes.current_position < '1' ? 'mdi:window-shutter' : 
    hass.states[entity].attributes.current_position > '96' ? 'mdi:window-shutter-open' : 
    'url("/local/custom_icons/window-tile-shutter.svg")' )}

Es wird kein Fehler ausgegeben. Es wird aber auch kein Icon ausgegeben. Ich habe keine Ahnung wie man überhaupt überprüfen kann, ob man korrekt auf das Bild verweist, oder ob schlicht der Pfad nicht korrekt ist.

Wenn das grundsätzlich nicht möglich eigene Icons in HA zu verwenden, dann mache ich da nen Haken drann und halte mich da nicht länger mit auf. Sind eh schon Stunden dafür drauf gegangen.

6

Natürlich ist es möglich, eigene icons und Bilder zu verwenden. Ich habe lediglich Zweifel angemeldet, weil du eben keine Icons verwendest, sondern Bilder, diese aber unter dem Key icon einbinden willst.

Icons haben immer ein Präfix (mdi: oder phu: oder ios: , um nur ein paar Bsp. zu nennen).

1 „Gefällt mir“
7

ich verstehe das nicht.

Ich habe in dem Ordner www.custom_icons folgende Datei liegen:

window-tile-shutter.svg

Ich verstehe das so, dass alle Icons die In HA verwendet werden SVG Dateien sind.
Icons und Bilder sind für mich ein und dasselbe. Ist das nicht korrekt?

Gibt es nicht irgendwo ein Verzeichnis wo alle Icons liegen. Man wirft eins dazu und es steht zur Verfügung.
Oder kann man nicht einfach einen Ordner erstellen. Dort seine eigenen Icons hochladen, diesen Ordner in HA referenzieren und dann stehen die Icons ebenfalls zu Verfügung?

8

Keine Ahnung ob das funktioniert, solltest Du vielleicht mal testen.

Custom Icons

9

Woher hast du das?

11

2025-07-27 10-40-43
2025-07-27 10-40-43973×471 74.6 KB

1 „Gefällt mir“
12

Danke für den Tip. Gucke ich mir auf jedenfall an.
Allerdings möchte ich blos ein einziges eigenes Icon verwenden. Einmalig.
Das erscheint mir tatsächlich wie mit Kananonen auf Spatzen schießen. Ich hatte gedacht das wäre einfacher, allerdings beschäftigt mich das seit gestern schon, seit vielen Stunden und ich weiß ehrlich gesagt nicht mal ansatzweise warum das so schwierig ist ein simples Bild zu referenzieren.

Ich würde das an dieser Stelle zunächst aufgeben. Das kostet mir zuviele Nerven für nen simples Bildchen.

ich danke euch allen für eure Bemühungen.

13

Das ist echt ein bisschen krampfig bei Bubble Card. Das funktioniert bei mir:


icon: none
styles: |-
  ${icon.setAttribute("icon", "")}
  .bubble-icon {
    width: 45px;
    height: 45px;
    background: ${hass.states[entity].attributes.current_position > 10
      ? "url('/local/images/wetter/icon/sunny.svg')"
      : "url('/local/images/hearts.jpeg')"
    } no-repeat center center;
    background-size: cover;
  }
1 „Gefällt mir“
14

Vielen vielen Dank für deine Hilfe, aber auch hier funktioniert es nicht. SO habe ich es mal versucht:

Das Rollo steht bei 93%.

${icon.setAttribute("icon", "")}

ha-card {
  --bubble-cover-icon-background-color: ${
      hass.states[entity].attributes.current_position < '1' ? '#525252' : 
      '#3b65a8'
  } !important;
}
.bubble-icon {
  color: ${
      hass.states[entity].attributes.current_position > '96' ? '#e1e1e1' : 
      hass.states[entity].attributes.current_position < '1' ? '#909090' : 
      '#0d0d4a'
  } !important;
  background: ${
      hass.states[entity].attributes.current_position < '1' ? 'mdi:window-shutter' : 
      hass.states[entity].attributes.current_position > '96' ? 'mdi:window-shutter-open' : 
      "url('/local/custom_icons/window-tile-shutter.svg')"
  } no-repeat center center !important;
  opacity: ${
      hass.states[entity].attributes.current_position < '97' ? '1' : 
      '1'
  } !important;
}
15

Du hast kein with: und height: definiert.

Was ebenfalls funktioniert, ist:


styles: |-
  .bubble-entity-picture {
    background: ${hass.states[entity].attributes.current_position < 25
      ? "url('/local/images/wetter/icon/sunny.svg')"
      : "url('/local/images/hearts.jpeg')"
    } no-repeat center center;
    display: block !important;          
  }
1 „Gefällt mir“
16

Ja da hast du recht. Wenn man das angibt, dann kommt da irgendwas… Irgend nen schwarzer Kasten… Ich würde sagen dass das Icon (die Datei) nicht skaliert wird. Die Farbe wird auch nicht übernommen. Das SVG ist und bleibt riesig und schwarz. Vielleicht habe ich auch bei dem SVG irgendwas falsch gemacht… kenne ich mich auch nicht mit aus.
Wenn ich ein PNG nehme passiert im Prinzip dasselbe und auch hier können natürlich keine Farben eingestellt werden, abhängig vom Status usw… dann müsste man auch für jede Eventualität ein seprates Bild erstellen usw…

Ich mache da jetzt nen Haken dran.

Vielen lieben Dank euch für eure Unterstützung!