Собственно захотелось красоты. Я не претендую на то что для всех это будет красиво, на вкус и цвет все фломастеры разные, но не найдя нужных иконок в стандартном наборе я сделал свои из svg.
пойдем сразу иконки рисовать в templates, чтобы не дублировать одинаковый код по карточкам, использовать я буду для этих целей button card. Сделаем templates для Button card, для этого заходим в редактирование Dashboard и в верхнем правом углу нажимаем три точки и выбираем Текстовый редактор
в начало пишем следующий код:
button_card_templates:
base_svg_icon:
show_icon: false
custom_fields:
myicon: '[[[ return variables.my_svg ]]]'
styles:
card:
- background: '#2a2a2a'
- color: white
- border-radius: 20px
- height: 70px
- width: 210px
- box-shadow: none
- font-size: 35px
- font-weight: bold
- justify-content: flex-start
name:
- font-weight: bold
- margin-left: 0px
- justify-content: flex-start !important
- text-align: left !important
grid:
- grid-template-areas: '"myicon n"'
- grid-template-columns: 44px 1fr
- align-items: center
- justify-items: start
custom_fields:
myicon:
- width: 44px
- height: 44px
- display: flex
- justify-content: center
- align-items: center
- margin-left: 10px
- margin-right: 5px
my_svg_icon_1:
template: base_svg_icon
variables:
my_svg: >
<svg width="44" height="44" viewBox="0 0 44 44" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="22" fill="url(#paint0_linear_91_1076)"/>
<circle cx="25.5" cy="27.5" r="3.5" stroke="white" stroke-width="1.5"/>
<path d="M23 25L20 22" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M20 19L24 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="17" cy="20" r="3" stroke="white" stroke-width="1.5"/>
<circle cx="26" cy="15" r="2" stroke="white" stroke-width="1.5"/>
<defs><linearGradient id="paint0_linear_91_1076" x1="11" y1="0" x2="35" y2="44" gradientUnits="userSpaceOnUse">
<stop stop-color="#3C5AFE"/><stop offset="1" stop-color="#5284BD"/></linearGradient></defs></svg>
тут 2 секции: base_svg_icon: и my_svg_icon_1:
my_svg_icon_1 — это шаблон который используется в my_svg_icon_1 для того чтобы не плодить одинаковый код, my_svg_icon_1 — это собственно наша иконка.
для добавления иконок просто скопируйте код
my_svg_icon_1:
template: base_svg_icon
variables:
my_svg: >
ВАШ SVG
и замените ВАШ SVG на свой код, просто откройте svg иконку в текстовом редакторе и скопируйте код и вставьте сюда, не забудьте переименовать my_svg_icon_1 так как это имя должно быть уникально.
Сохраняем и закрываем редактор. Вставляем карточку Button Card со следующим содержимым:
type: custom:button-card entity: weather.moscow name: "[[[ return states['weather.moscow'].attributes.temperature + '°C'; ]]]" template: my_svg_icon_1 show_icon: false show_name: true tap_action: action: more-info
созданный шаблон задается в строке:
template: my_svg_icon_1
У Вас получится вот такая карточка
стиль карточки можно поменять через template для всех карточек которые используют этот шаблон, или через саму карточку, например к карточке добавьте:
styles:
card:
- font-size: 30px
Это переопределит стиль заданный в template, в данном случае задаст размер текста 30px.
Так можно задать или переопределить любое свойство, свойство заданное в карточке имеет приоритет над свойством в шаблоне.
Вот код для разных иконок
просто добавьте в редактор как написано выше следующий код (в карточке my_svg_icon_2, my_svg_icon_3, my_svg_icon_4):
my_svg_icon_2:
template: base_svg_icon
variables:
my_svg: >
<svg width="44" height="44" viewBox="0 0 44 44" fill="none"
xmlns="http://www.w3.org/2000/svg"> <circle cx="22" cy="22" r="22"
fill="url(#paint0_linear_91_1071)"/> <path d="M18.9992 29.1983C17.9312
29.1983 16.8871 28.8193 15.9991 28.1094C15.111 27.3994 14.419 26.3903
14.0104 25.2097C13.6018 24.0292 13.4951 22.7302 13.7037 21.477C13.9123
20.2239 14.4269 19.0729 15.1824 18.1697L18.9959 13.5996L20.906 15.8847"
stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/> <path d="M26.2363 27.235V26.6827C26.2363
26.2532 26.3284 25.8561 26.5125 25.4914C26.6999 25.1266 26.9709 24.8335
27.3255 24.6119C27.68 24.3903 28.1129 24.2795 28.6242 24.2795C29.1458
24.2795 29.5838 24.3903 29.9383 24.6119C30.2962 24.8301 30.5655 25.1215
30.7462 25.4862C30.9303 25.8476 31.0223 26.2464 31.0223
26.6827V27.235C31.0223 27.6645 30.9303 28.0616 30.7462 28.4263C30.5621
28.7911 30.2911 29.0842 29.9332 29.3058C29.5753 29.5274 29.1389 29.6382
28.6242 29.6382C28.1061 29.6382 27.6697 29.5274 27.3152 29.3058C26.9607
29.0842 26.6914 28.7911 26.5073 28.4263C26.3267 28.0616 26.2363 27.6645
26.2363 27.235ZM27.8674 26.6827V27.235C27.8674 27.4531 27.9203 27.6628
28.026 27.8639C28.135 28.065 28.3345 28.1656 28.6242 28.1656C28.9208
28.1656 29.1202 28.0684 29.2224 27.8741C29.3247 27.6764 29.3758 27.4634
29.3758 27.235V26.6827C29.3758 26.4543 29.3264 26.2396 29.2276
26.0385C29.1321 25.8339 28.931 25.7317 28.6242 25.7317C28.3379 25.7317
28.1402 25.8339 28.0311 26.0385C27.922 26.2396 27.8674 26.4543 27.8674
26.6827ZM20.8061 21.2423V20.6901C20.8061 20.2537 20.8999 19.8549 21.0873
19.4936C21.2782 19.1288 21.5509 18.8374 21.9055 18.6192C22.26 18.3977
22.6895 18.2869 23.194 18.2869C23.7155 18.2869 24.1536 18.3977 24.5081
18.6192C24.866 18.8374 25.137 19.1288 25.3211 19.4936C25.5052 19.8549
25.5972 20.2537 25.5972 20.6901V21.2423C25.5972 21.6786 25.5034 22.0774
25.316 22.4388C25.1319 22.8001 24.8609 23.0882 24.503 23.3029C24.145
23.5177 23.7087 23.625 23.194 23.625C22.6793 23.625 22.2429 23.516
21.885 23.2978C21.5305 23.0796 21.2612 22.7899 21.0771 22.4286C20.8965
22.0672 20.8061 21.6718 20.8061 21.2423ZM22.4526 20.6901V21.2423C22.4526
21.4707 22.5054 21.6837 22.6111 21.8814C22.7202 22.0757 22.9145 22.1729
23.194 22.1729C23.494 22.1729 23.6934 22.0757 23.7922 21.8814C23.8945
21.6837 23.9456 21.4707 23.9456 21.2423V20.6901C23.9456 20.4617 23.8979
20.2469 23.8025 20.0458C23.707 19.8413 23.5042 19.739 23.194
19.739C22.9076 19.739 22.7116 19.843 22.606 20.0509C22.5037 20.2589
22.4526 20.4719 22.4526 20.6901ZM22.6716 29.1984C22.2085 29.1984 21.9353
28.6791 22.1976 28.2975L28.6062 18.9759C28.7135 18.8198 28.8907 18.7266
29.0801 18.7266C29.5432 18.7266 29.8164 19.246 29.5541 19.6276L23.1455
28.9491C23.0382 29.1052 22.861 29.1984 22.6716 29.1984Z" fill="white"/>
<defs><linearGradient id="paint0_linear_91_1071" x1="11"
y1="-3.57628e-07" x2="35" y2="44" gradientUnits="userSpaceOnUse"> <stop
stop-color="#3C5AFE"/><stop offset="1"
stop-color="#5284BD"/></linearGradient></defs></svg>
my_svg_icon_3:
template: base_svg_icon
variables:
my_svg: >
<svg width="44" height="44" viewBox="0 0 44 44" fill="none"
xmlns="http://www.w3.org/2000/svg"> <circle cx="22" cy="22" r="22"
fill="url(#paint0_linear_91_985)"/> <path d="M24.2222
24.2573V15.0453C24.2222 14.5029 23.9881 13.9826 23.5713 13.5991C23.1546
13.2155 22.5894 13 22 13C21.4106 13 20.8454 13.2155 20.4287
13.5991C20.0119 13.9826 19.7778 14.5029 19.7778 15.0453V24.2573C19.0642
24.6961 18.523 25.3345 18.2338 26.0781C17.9447 26.8218 17.9231 27.6313
18.1722 28.3871C18.4213 29.1429 18.9279 29.805 19.6172 30.2755C20.3065
30.746 21.1419 31 22 31C22.8581 31 23.6935 30.746 24.3828
30.2755C25.0721 29.805 25.5787 29.1429 25.8278 28.3871C26.0769 27.6313
26.0553 26.8218 25.7662 26.0781C25.477 25.3345 24.9358 24.6961 24.2222
24.2573Z" stroke="white" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"/> <defs><linearGradient
id="paint0_linear_91_985" x1="11" y1="-3.57628e-07" x2="35" y2="44"
gradientUnits="userSpaceOnUse"> <stop stop-color="#3C5AFE"/><stop
offset="1" stop-color="#5284BD"/></linearGradient></defs></svg>
my_svg_icon_4:
template: base_svg_icon
variables:
my_svg: >
<svg width="44" height="44" viewBox="0 0 44 44" fill="none"
xmlns="http://www.w3.org/2000/svg"> <circle cx="22" cy="22" r="22"
fill="url(#paint0_linear_161_13)"/> <path d="M24.5 16.835C26.3753 16.835
28.165 18.7591 28.165 21.5C28.165 24.2409 26.3753 26.165 24.5
26.165C22.6247 26.165 20.835 24.2409 20.835 21.5C20.835 18.7591 22.6247
16.835 24.5 16.835Z" stroke="white" stroke-width="1.67"/> <path
d="M28.1241 32V30.8439L30.4938 29.0173C30.651 28.896 30.7854 28.7823
30.897 28.6763C31.0108 28.5684 31.0976 28.4576 31.1576 28.3439C31.2196
28.2303 31.2506 28.104 31.2506 27.9653C31.2506 27.8131 31.2155 27.683
31.1452 27.5751C31.0769 27.4672 30.9818 27.3844 30.8598 27.3266C30.7378
27.2669 30.5972 27.237 30.438 27.237C30.2787 27.237 30.1381 27.2669
30.0161 27.3266C29.8962 27.3863 29.8031 27.474 29.737 27.5896C29.6708
27.7052 29.6377 27.8459 29.6377 28.0116H28C28 27.5954 28.1003 27.237
28.3009 26.9364C28.5014 26.6358 28.7847 26.4046 29.1507 26.2428C29.5167
26.0809 29.9458 26 30.438 26C30.9467 26 31.3871 26.0761 31.7593
26.2283C32.1336 26.3786 32.422 26.5906 32.6247 26.8642C32.8294 27.1378
32.9318 27.4586 32.9318 27.8266C32.9318 28.054 32.8811 28.2803 32.7798
28.5058C32.6785 28.7293 32.4965 28.9769 32.2339 29.2486C31.9713 29.5202
31.598 29.8439 31.1141 30.2197L30.5186 30.6821V30.7168H33V32H28.1241Z"
fill="white"/> <path d="M19 19.6283H17.4109C17.3497 19.2798 17.236
18.9731 17.0696 18.7082C16.9032 18.4433 16.6995 18.2185 16.4584
18.0337C16.2173 17.849 15.9474 17.7096 15.6486 17.6155C15.3531 17.5214
15.039 17.4743 14.7063 17.4743C14.1053 17.4743 13.5671 17.6294 13.0917
17.9396C12.6197 18.2498 12.2462 18.7047 11.9711 19.3042C11.6995 19.9037
11.5637 20.6356 11.5637 21.5C11.5637 22.3714 11.6995 23.1068 11.9711
23.7063C12.2462 24.3058 12.6214 24.7589 13.0968 25.0656C13.5722 25.3723
14.107 25.5257 14.7012 25.5257C15.0306 25.5257 15.343 25.4804 15.6384
25.3897C15.9372 25.2956 16.2071 25.158 16.4482 24.9767C16.6893 24.7955
16.893 24.5741 17.0594 24.3127C17.2292 24.0478 17.3464 23.7446 17.4109
23.403L19 23.4083C18.9151 23.9346 18.7504 24.419 18.5059 24.8617C18.2649
25.3009 17.9542 25.6808 17.5739 26.0014C17.1969 26.3186 16.7657 26.5643
16.2801 26.7386C15.7946 26.9129 15.2649 27 14.691 27C13.7878 27 12.983
26.7804 12.2767 26.3413C11.5705 25.8986 11.0136 25.266 10.6061
24.4434C10.202 23.6209 10 22.6397 10 21.5C10 20.3568 10.2037 19.3756
10.6112 18.5566C11.0187 17.734 11.5756 17.1031 12.2818 16.664C12.9881
16.2213 13.7912 16 14.691 16C15.2445 16 15.7606 16.0819 16.2394
16.2457C16.7216 16.4061 17.1545 16.6431 17.5382 16.9567C17.9219 17.267
18.2394 17.6469 18.4907 18.0965C18.7419 18.5426 18.9117 19.0532 19
19.6283Z" fill="white"/> <defs><linearGradient id="paint0_linear_161_13"
x1="11" y1="-3.57628e-07" x2="35" y2="44"
gradientUnits="userSpaceOnUse"> <stop stop-color="#3C5AFE"/><stop
offset="1" stop-color="#5284BD"/></linearGradient></defs></svg>
HomeAssistant. свои svg иконки.