# Ogólne: Własne ikony (AI-Speaker - Home Assistant)

**URL:** <https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147>\
**Category:** faq\
**Created:** [11 Styczeń 2020 23:35 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147 "2020-01-11T23:35:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Autor:** ![Tomasz](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/tomasz/32/286_2.png) [@Tomasz](https://ai-speaker.discourse.group/u/Tomasz)\
**Data wpisu:** [11 Styczeń 2020 23:35 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/1 "2020-01-11T23:35:42Z")

</div>

Przedstawiony sposób tworzy nową encje typu Switch do której można zastosować własne ikony które będą zmieniały się wraz ze jej stanem.  
Dla mnie nie jest to optymalne rozwiązanie, wolałbym zmienić ikonę (oczywiście wraz z jej stanem) dla istniejącej już encji.  
Materiał źródłowy:

> **[Template Switch](https://www.home-assistant.io/integrations/switch.template/)**
>
> Instructions on how to integrate Template Switches into Home Assistant.

  
dzięki @ [mariusz\_70](https://ai-speaker.discourse.group/u/mariusz_70) 😉

Tak jak wspomniałem na podstawie istniejącej encji tworzymy nową, efekt jest jak niżej.  
Ta u góry (Łazienka) to bazowa encja, na podstawie której tworzymy wirtualną encje z podmienioną ikonką (ta na dole Light)  
 ![1](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/66af44d7144c41f723222dafb163c5e6cb4005d3.jpeg)  
i tak samo dla wyłaczonego światła.  
 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/54e4abc8a668ee909f89b45c01ae97b4f2a1cc30.png)  
W tym przykładzie użyłem ikonek do darmowego pobrania z:

> **[Light bulb free vector icons designed by Freepik](https://www.flaticon.com/free-icon/light-bulb_129498)**
>
> Download this free icon in SVG, PSD, PNG, EPS format or as webfonts.
> Flaticon, the largest database of free vector icons.

  
ich format to plik .png o wymiarach 512x512 @32bit/121dpi

Opis:

Na bramce, w folderze AIS:

- w pliku configuration.yaml robimy wpis:  
switch: !include switch.yaml

- tworzymy plik switch.yaml i dodajemy do niego następując wpis

następnie w kodzie podmieniamy:  
**light.incan\_lazienka** = nasz encja bazowa, na podstawie której tworzymy wirtualną encje, jak widać występuje 4 razy, więc podmieniamy wszędzie  
**/local/img/big-light.png** - adres naszej ikony OFF z galerii na bramce AIS  
**/local/img/light-bulb.png** - adres naszej ikony ON z galerii na bramce AIS

O galerii więcej informacji tutaj:

> **[Wersja systemu 0.102 Galeria i QR kody · Asystent domowy](https://sviete.github.io/AIS-docs/blog/2019/12/11/release-notes.html)**
>
> \## Wersja systemu 0.102.4 z dnia 11 grudnia 2019 roku,

  
Zapisujemy, sprawdzamy konfiguracje i uruchamiamy bramkę ponownie.

Przykład z inną ikonką na filmie poniżej:

---

<div class="post-metadata">

**Autor:** ![Celina](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/celina/32/27_2.png) [@Celina](https://ai-speaker.discourse.group/u/Celina)\
**Data wpisu:** [14 Styczeń 2020 11:08 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/2 "2020-01-14T11:08:04Z")

</div>

@Tomasz bardzo fajne 🙂 możemy wrzucić Twoje video na FB? 🙂

---

<div class="post-metadata">

**Autor:** ![Tomasz](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/tomasz/32/286_2.png) [@Tomasz](https://ai-speaker.discourse.group/u/Tomasz)\
**Data wpisu:** [14 Styczeń 2020 11:10 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/3 "2020-01-14T11:10:24Z")

</div>

@Celina oczywiście, że tak

---

<div class="post-metadata">

**Autor:** ![mariusz\_70](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@mariusz\_70](https://ai-speaker.discourse.group/u/mariusz_70)\
**Data wpisu:** [15 Styczeń 2020 18:58 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/4 "2020-01-15T18:58:03Z")

</div>

Uzupełnienie tematu - ikony dla bram.  
Opisze dwa sposoby:  
1 - z wykorzystaniem dedykowanych ikon do HA  
2 - własne ikony.

Tworzymy w pliku cover.yaml dodatkowy wirtualny kanał do sterowania naszą bramą:

```
- platform: template
  covers:
    door1:
      friendly_name: 'BRAMA 1'
      device_class: door
      open_cover:
        service: cover.open_cover
        entity_id: cover.brama_wjazd
      close_cover:
        service: cover.close_cover
        entity_id: cover.brama_wjazd
      stop_cover:
        service: cover.stop_cover
        entity_id: cover.brama_wjazd
      value_template: "{{is_state('cover.brama_wjazd', 'open')}}"
      icon_template: >-
        {% if is_state('cover.brama_wjazd', 'open') %}
          mdi:gate-arrow-right
        {% else %}
          mdi:gate
        {% endif %}

```

“icon\_template:” to parametr w którym definiujemy jakie ikony będą wyświetlane w interfejsie naszej bramki, a dokładnie wskazujemy to w lini “mdi:”.  
Przechodzimy do strony [https://materialdesignicons.com/tag/home-automation](https://materialdesignicons.com/tag/home-automation) gdzie wyszukujemy interesującą nas ikonę, po kliknięciu w wybraną przez nas ikonę pojawi się nowe okno z którego kopiujemy nazwę danej ikony.

 ![HAicon](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/792fdd958d1ceb7c239f047200e9b7d43543eb81.jpeg)

skopiowaną nazwe ikony wklejamy do lini “mdi:” - mdi:gate-arrow-right

Brama zamknięta:

![brama_zam](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/a2824a56b6f2617a3904180e2f24c6f3077944e1.jpeg)

Brama otwarta:

![brama_otw](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/8a97c4350697cc7f8345ac7193aea9a765fe7f2d.jpeg)

Przy tworzeniu encji z własnymi ikonami musimy zmienić parametr “icon\_template:” na “entity\_picture\_template:”.

```
- platform: template
  covers:
    door2:
      friendly_name: 'BRAMA 2'
      device_class: door
      open_cover:
        service: cover.open_cover
        entity_id: cover.brama_wjazd
      close_cover:
        service: cover.close_cover
        entity_id: cover.brama_wjazd
      stop_cover:
        service: cover.stop_cover
        entity_id: cover.brama_wjazd
      value_template: "{{is_state('cover.brama_wjazd', 'open')}}"
      entity_picture_template: >-
        {% if is_state('cover.brama_wjazd', 'open') %}
          /local/icon/gate-open.png
        {% else %}
          /local/icon/gate-close.png
        {% endif %}

```

W “entity\_picture\_template:” definiujemy ścieżkę do naszych ikon.  
Umieszczając ikony w galerii ścieżka do naszych ikon to: /local/img/nazwa\_ikony.png  
w/w przykładzie jest inna: /local/icon/nazwa\_ikony.png  
Dlaczego taka różnica, ponieważ swoje ikony umieściłem w nowo utworzonym katalogu o nazwie “icon”.  
Uważam że w galerii powinny być umieszczone fotki które “cieszą oko” a ikony do nich nie należą.  
Procedura:  
Na komputerze z windowsem tworzymy folder o nazwie “icon” w którym umieszczamy nasze ikony.  
Łączymy się z bramką za pomocą programu np: WinSCP i otwieramy katalog “www” do którego kopiujemy wcześniej utworzony na komputerze folder “icon”.

 ![www](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/d1ca4f00f21b49e45aae477408f2e854c2d162e1.jpeg)

Brama zamknięta:

![brama_zam_kolor](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/a16c54a60447cc013e095ed2c8f5e4511f3c1907.jpeg)

Brama otwarta:

![brama_otw_kolor](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/6443be82f3727ff88b45f040ba730e4150a86440.jpeg)

---

<div class="post-metadata">

**Autor:** ![mariusz\_70](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@mariusz\_70](https://ai-speaker.discourse.group/u/mariusz_70)\
**Data wpisu:** [16 Styczeń 2020 19:44 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/5 "2020-01-16T19:44:05Z")

</div>

Na oficjalnej stronie z ikonami do [**HA**](https://materialdesignicons.com/) jest zakładka “Advancer Export”, dzięki której możemy dostosować kolorystyczne ikony do naszych potrzeb, pobrać je i umieścić na naszej bramce.

 ![ikony-conf](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/e74a8305044e870ee385dad9b1e76b6b7ecd2b1c.jpeg)  
 ![ikony-kolor](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/b58eaafaf382554d8fc2ac8107724992fca63ed5.jpeg)  
A to efekt końcowy:  
 ![brama-otw](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/2277f9e681061d38e2e263cd48a24a31010835dc.png)

![brama-zamk](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/1X/22f3f41bdf2d8820ca3d576764e28f6a7d66f69b.png)

---

<div class="post-metadata">

**Autor:** ![pab11o](https://avatars.discourse-cdn.com/v4/letter/p/ba9def/32.png) [@pab11o](https://ai-speaker.discourse.group/u/pab11o)\
**Data wpisu:** [29 Marzec 2020 11:13 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/6 "2020-03-29T11:13:56Z")

</div>

- platform: template  
covers:  
door1:  
friendly\_name: ‘BRAMA 1’  
device\_class: door  
open\_cover:  
service: cover.open\_cover  
entity\_id: cover.brama\_wjazd  
close\_cover:  
service: cover.close\_cover  
entity\_id: cover.brama\_wjazd  
stop\_cover:  
service: cover.stop\_cover  
entity\_id: cover.brama\_wjazd  
value\_template: “{{is\_state(‘cover.brama\_wjazd’, ‘open’)}}”  
icon\_template: \>-  
{% if is\_state(‘cover.brama\_wjazd’, ‘open’) %}  
mdi:gate-arrow-right  
{% else %}  
mdi:gate  
{% endif %}  
witam stworzyłem plik cover wkleiłem ten kod do niego i nadal mam stare ikonki pomoże ktoś? Może ten kod ma być wklejony do config.yaml

---

<div class="post-metadata">

**Autor:** ![Cezary.K](https://avatars.discourse-cdn.com/v4/letter/c/a88e4f/32.png) [@Cezary.K](https://ai-speaker.discourse.group/u/Cezary.K)\
**Data wpisu:** [4 Wrzesień 2020 21:47 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/7 "2020-09-04T21:47:11Z")

</div>

> [@mariusz\_70](#):
>
> Uzupełnienie tematu - ikony dla bram.  
> Opisze dwa sposoby:  
> 1 - z wykorzystaniem dedykowanych ikon do HA

Czy to normalne, że nie mogę zmienić ikony midi?  
Czy należy coś zmienić ręcznie w konfiguracji bramki aby zmieniały się ikony dedykowane?  
Na przykład dopisać adres strony _[Material Design Icons - Icon Library - Pictogrammers](https://materialdesignicons.com/tag/home-automation)_ w pliku _customize.yaml_?  
Czy po podaniu nazwy ikony np `midi:fan` muszę zrestartować serwer?

![obraz](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/2/25c2ce22d5a4bc9d84c44a681ba73190668c66ba.png)

Dodaję na pasku widoku `midi:fan` ale bez rezultatu.

---

<div class="post-metadata">

**Autor:** ![Tomasz](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/tomasz/32/286_2.png) [@Tomasz](https://ai-speaker.discourse.group/u/Tomasz)\
**Data wpisu:** [5 Wrzesień 2020 05:30 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/8 "2020-09-05T05:30:40Z")

</div>

Źle wpisujesz, powinno być

> mdi:fan

---

<div class="post-metadata">

**Autor:** ![Cezary.K](https://avatars.discourse-cdn.com/v4/letter/c/a88e4f/32.png) [@Cezary.K](https://ai-speaker.discourse.group/u/Cezary.K)\
**Data wpisu:** [5 Wrzesień 2020 05:48 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/9 "2020-09-05T05:48:28Z")

</div>

Dzięki Tomasz. Jednak zmęczenie 😴 materiału o tej porze w piątek nie sprzyja modernizacji HA, zwłaszcza jak się równolegle robi inne rzeczy. Na przykład przy stawianiu Win bez sterowników.

---

<div class="post-metadata">

**Autor:** ![Akszyn](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/akszyn/32/4038_2.png) [@Akszyn](https://ai-speaker.discourse.group/u/Akszyn)\
**Data wpisu:** [21 Grudzień 2020 21:38 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/10 "2020-12-21T21:38:16Z")

</div>

Ta strona juz chyba nie działa

> [@mariusz\_70](#):
>
> Przechodzimy do strony

Więc polecam tą stronę [Material Design Icons • Iconify](https://iconify.design/icon-sets/mdi/) gdyż po prostu wystarczy skopiować fragment który jest w cudzysłowie zaczynający sie od “mdi…” I od razu wkleić do ha

---

<div class="post-metadata">

**Autor:** ![Akszyn](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/akszyn/32/4038_2.png) [@Akszyn](https://ai-speaker.discourse.group/u/Akszyn)\
**Data wpisu:** [21 Grudzień 2020 21:40 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/11 "2020-12-21T21:40:55Z")

</div>

Czyżby wyłączyli stronę ?

> [@mariusz\_70](#):
>
> Na oficjalnej stronie z ikonami do [**HA**](https://materialdesignicons.com/)

Bo mam błąd: DNS\_PROBE\_FINISHED\_NXDOMAIN

---

<div class="post-metadata">

**Autor:** ![Cezary.K](https://avatars.discourse-cdn.com/v4/letter/c/a88e4f/32.png) [@Cezary.K](https://ai-speaker.discourse.group/u/Cezary.K)\
**Data wpisu:** [21 Grudzień 2020 21:43 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/12 "2020-12-21T21:43:26Z")

</div>

Poczekać aż ponownie zacznie działać.

---

<div class="post-metadata">

**Autor:** ![crafal](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@crafal](https://ai-speaker.discourse.group/u/crafal)\
**Data wpisu:** [2 Styczeń 2021 20:07 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/13 "2021-01-02T20:07:13Z")

</div>

Bardzo proszę o podpowiedź gdzie mam błąd. Otóż mam w pliku `switch.yaml` wpisy, za pomocą których steruję bramą wjazdową i garażową. Chciałem pozmieniać ikony na swoje i w pliku `covers.yaml` dodałem odpowiednie wpisy.  
Efekt jest taki, że widzę swoje ikony jednak sterowanie nie działa. Poniżej wpisy w pliku switch.yaml oraz cover.yaml

Switch.yaml

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/a/a45dde17266325638a21f0f523b192e6ccd20b47.png)

cover.yaml

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/2/257a6da414e57a4fdad4335968eb6e20186962d6.png)

Gdzie popełniłem błąd?

---

<div class="post-metadata">

**Autor:** ![Stravi](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@Stravi](https://ai-speaker.discourse.group/u/Stravi)\
**Data wpisu:** [2 Styczeń 2021 20:48 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/14 "2021-01-02T20:48:09Z")

</div>

W cover próbujesz sterować urządzeniem cover a domyślam się że zamiar był taki żeby sterować switchem.

---

<div class="post-metadata">

**Autor:** ![crafal](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@crafal](https://ai-speaker.discourse.group/u/crafal)\
**Data wpisu:** [2 Styczeń 2021 21:46 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/15 "2021-01-02T21:46:30Z")

</div>

No pewnie, że tak… Teraz działa. Dzięki za podpowiedź 🙂

---

<div class="post-metadata">

**Autor:** ![Akszyn](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/akszyn/32/4038_2.png) [@Akszyn](https://ai-speaker.discourse.group/u/Akszyn)\
**Data wpisu:** [12 Styczeń 2021 19:47 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/16 "2021-01-12T19:47:33Z")

</div>

jak używać [ikon google](https://www.google.com/design/icons/) ? chodzi mi o to jaki mają skrót przed dwukropkiem bo “mdi:” nie działa

---

<div class="post-metadata">

**Autor:** ![Stravi](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@Stravi](https://ai-speaker.discourse.group/u/Stravi)\
**Data wpisu:** [13 Styczeń 2021 08:53 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/17 "2021-01-13T08:53:30Z")

</div>

Nie kojarzę żeby ikonki google były dodane do HA.  
Ikonki MDI możesz obejrzeć wszystkie tutaj:  
[https://pictogrammers.github.io/@mdi/font/5.3.45/](https://pictogrammers.github.io/@mdi/font/5.3.45/)

---

<div class="post-metadata">

**Autor:** ![Akszyn](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/akszyn/32/4038_2.png) [@Akszyn](https://ai-speaker.discourse.group/u/Akszyn)\
**Data wpisu:** [13 Styczeń 2021 10:16 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/18 "2021-01-13T10:16:31Z")

</div>

Nie wiem czy w samym ha są ale jak sie wejdzie w konfigurację potem w informacje to jest o tym wzmianka na bramce

 ![IMG_20210113_111522](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/d/dfe89a2290c634a97131f58cb4c1a4bfbda07f61.jpeg)

---

<div class="post-metadata">

**Autor:** ![Stravi](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@Stravi](https://ai-speaker.discourse.group/u/Stravi)\
**Data wpisu:** [13 Styczeń 2021 10:46 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/19 "2021-01-13T10:46:48Z")

</div>

Hm… przejrzałem kilka ikon i wyglądają tak samo tutaj:

> **[Material Design](https://material.io/resources/icon:s/?style=baseline)**
>
> Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

i tutaj:  
[https://pictogrammers.github.io/@mdi/font/5.3.45/](https://pictogrammers.github.io/@mdi/font/5.3.45/)

Jak zaczniesz szukać jak użyć ikon Google to dojdziesz np. do takiego polecenia:

```auto
npm install material-design-icons

```

---

<div class="post-metadata">

**Autor:** ![Akszyn](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/akszyn/32/4038_2.png) [@Akszyn](https://ai-speaker.discourse.group/u/Akszyn)\
**Data wpisu:** [13 Styczeń 2021 10:52 UTC](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147/20 "2021-01-13T10:52:34Z")

</div>

Może spora część tak

> [@Stravi](#):
>
> wyglądają tak samo tutaj:

Ale są tam też ikony których nie ma

[Następna strona](https://ai-speaker.discourse.group/t/ogolne-wlasne-ikony-ai-speaker-home-assistant/147.md?page=2)