How to add an icon to a card’s title
Some cards support an icon for a title, some not.
Here 2 examples:
– custom:stack-in-card
– history-graph
code
type: vertical-stack
cards:
- type: custom:stack-in-card
title: some title
mode: horizontal
keep:
outer_padding: true
border: true
margin: true
border_radius: true
cards:
- type: entity
entity: sun.sun
- type: button
entity: sun.sun
card_mod:
style:
$: |
.card-header {
display: flex !important;
align-items: center;
color: red !important
}
.card-header:before {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(47,166,242)' d='M257.5 420L286.6 391H313.4C315.5 396.8 321 401 327.6 401C335.9 401 342.6 394.3 342.6 386C342.6 377.7 335.9 371 327.6 371C321.1 371 315.5 375.2 313.4 381H282.4L255.4 407.9V375L287.5 342.9H339.4C341.5 348.7 347 352.9 353.6 352.9C361.9 352.9 368.6 346.2 368.6 337.9C368.6 329.6 361.9 322.9 353.6 322.9C347.1 322.9 341.5 327.1 339.4 332.9H297.5L327.5 303V278L349.1 256.5C351.1 257.4 353.3 258 355.6 258C363.9 258 370.6 251.3 370.6 243C370.6 234.7 363.9 228 355.6 228C347.3 228 340.6 234.7 340.6 243C340.6 245.3 341.1 247.5 342.1 249.5L327.6 264V218.2C333.4 216.1 337.6 210.6 337.6 204.1C337.6 195.8 330.9 189.1 322.6 189.1C314.3 189.1 307.6 195.8 307.6 204.1C307.6 210.6 311.8 216.2 317.6 218.2V264L303.1 249.5C304 247.5 304.6 245.3 304.6 243C304.6 234.7 297.9 228 289.6 228C281.3 228 274.6 234.7 274.6 243C274.6 251.3 281.3 258 289.6 258C291.9 258 294.1 257.5 296.1 256.5L317.7 278V298.9L290.7 325.9V306.1C296.5 304 300.7 298.5 300.7 292C300.7 283.7 294 277 285.7 277C277.4 277 270.7 283.7 270.7 292C270.7 298.5 274.9 304.1 280.7 306.1V335.9L255.7 360.9V214.1L276.3 193.6C278.3 194.5 280.5 195.1 282.8 195.1C291.1 195.1 297.8 188.4 297.8 180.1C297.8 171.8 291.1 165.1 282.8 165.1C274.5 165.1 267.8 171.8 267.8 180.1C267.8 182.4 268.3 184.6 269.3 186.6L250.8 205.1L232.3 186.6C233.2 184.6 233.8 182.4 233.8 180.1C233.8 171.8 227.1 165.1 218.8 165.1C210.5 165.1 203.8 171.8 203.8 180.1C203.8 188.4 210.5 195.1 218.8 195.1C221.1 195.1 223.3 194.6 225.3 193.6L245.9 214.1V319L209.8 283V254.2C215.6 252.1 219.8 246.6 219.8 240.1C219.8 231.8 213.1 225.1 204.8 225.1C196.5 225.1 189.8 231.8 189.8 240.1C189.8 246.6 194 252.2 199.8 254.2V273L171.7 245V217.2C177.5 215.1 181.7 209.6 181.7 203.1C181.7 194.8 175 188.1 166.7 188.1C158.4 188.1 151.7 194.8 151.7 203.1C151.7 209.6 155.9 215.2 161.7 217.2V249.1L192.7 280H174.9C172.8 274.2 167.3 270 160.7 270C152.4 270 145.7 276.7 145.7 285C145.7 293.3 152.4 300 160.7 300C167.2 300 172.8 295.8 174.9 290H202.7L245.8 333.1V408L222.8 385V356.2C228.6 354.1 232.8 348.6 232.8 342.1C232.8 333.8 226.1 327.1 217.8 327.1C209.5 327.1 202.8 333.8 202.8 342.1C202.8 348.6 207 354.2 212.8 356.2V375L179.3 341.5C180.2 339.5 180.8 337.3 180.8 335C180.8 326.7 174.1 320 165.8 320C157.5 320 150.8 326.7 150.8 335C150.8 343.3 157.5 350 165.8 350C168.1 350 170.3 349.5 172.3 348.5L205.8 382H188C185.9 376.2 180.4 372 173.8 372C165.5 372 158.8 378.7 158.8 387C158.8 395.3 165.5 402 173.8 402C180.3 402 185.9 397.8 188 392H215.8L243.9 420H104.5C100.2 420 96.7 416.5 96.7 412.2V279H61.3C56.1 279 52 274.8 52 269.7C52 267.2 53 264.9 54.7 263.1L242.2 73.4C246.7 68.8 254.1 68.8 258.7 73.3L258.8 73.4L356.7 172V153.8C356.7 149.5 360.2 146 364.5 146H397C401.3 146 404.8 149.5 404.8 153.8V220.7L446.4 263.1C450 266.8 450 272.7 446.3 276.3C444.6 278 442.2 279 439.8 279H404.9V412.2C404.9 416.5 401.4 420 397.1 420H257.5ZM173.3 393C170 393 167.3 390.3 167.3 387C167.3 383.7 170 381 173.3 381C176.6 381 179.3 383.7 179.3 387C179.3 390.3 176.6 393 173.3 393ZM217.4 348C214.1 348 211.4 345.3 211.4 342C211.4 338.7 214.1 336 217.4 336C220.7 336 223.4 338.7 223.4 342C223.4 345.3 220.7 348 217.4 348ZM165.3 341C162 341 159.3 338.3 159.3 335C159.3 331.7 162 329 165.3 329C168.6 329 171.3 331.7 171.3 335C171.3 338.3 168.6 341 165.3 341ZM160.3 291C157 291 154.3 288.3 154.3 285C154.3 281.7 157 279 160.3 279C163.6 279 166.3 281.7 166.3 285C166.3 288.3 163.6 291 160.3 291ZM285.5 298C282.2 298 279.5 295.3 279.5 292C279.5 288.7 282.2 286 285.5 286C288.8 286 291.5 288.7 291.5 292C291.5 295.3 288.8 298 285.5 298ZM353.6 344C350.3 344 347.6 341.3 347.6 338C347.6 334.7 350.3 332 353.6 332C356.9 332 359.6 334.7 359.6 338C359.6 341.3 356.9 344 353.6 344ZM327.6 392C324.3 392 321.6 389.3 321.6 386C321.6 382.7 324.3 380 327.6 380C330.9 380 333.6 382.7 333.6 386C333.6 389.3 330.9 392 327.6 392ZM355.6 249C352.3 249 349.6 246.3 349.6 243C349.6 239.7 352.3 237 355.6 237C358.9 237 361.6 239.7 361.6 243C361.6 246.3 358.9 249 355.6 249ZM322.6 210C319.3 210 316.6 207.3 316.6 204C316.6 200.7 319.3 198 322.6 198C325.9 198 328.6 200.7 328.6 204C328.6 207.3 325.9 210 322.6 210ZM282.5 186C279.2 186 276.5 183.3 276.5 180C276.5 176.7 279.2 174 282.5 174C285.8 174 288.5 176.7 288.5 180C288.5 183.3 285.8 186 282.5 186ZM218.4 186C215.1 186 212.4 183.3 212.4 180C212.4 176.7 215.1 174 218.4 174C221.7 174 224.4 176.7 224.4 180C224.4 183.3 221.7 186 218.4 186ZM166.3 209C163 209 160.3 206.3 160.3 203C160.3 199.7 163 197 166.3 197C169.6 197 172.3 199.7 172.3 203C172.3 206.3 169.6 209 166.3 209ZM204.3 246C201 246 198.3 243.3 198.3 240C198.3 236.7 201 234 204.3 234C207.6 234 210.3 236.7 210.3 240C210.4 243.3 207.7 246 204.3 246ZM289.5 249C286.2 249 283.5 246.3 283.5 243C283.5 239.7 286.2 237 289.5 237C292.8 237 295.5 239.7 295.5 243C295.5 246.3 292.8 249 289.5 249Z'/%3E%3C/svg%3E");
height: 24px;
width: 24px;
margin-top: -12px;
padding-left: 8px;
padding-right: 18px;
}
- type: history-graph
title: some title
entities:
- sun.sun
card_mod:
style: |
.card-header {
justify-content: flex-start;
align-items: center;
color: red !important;
}
.card-header:before {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(47,166,242)' d='M257.5 420L286.6 391H313.4C315.5 396.8 321 401 327.6 401C335.9 401 342.6 394.3 342.6 386C342.6 377.7 335.9 371 327.6 371C321.1 371 315.5 375.2 313.4 381H282.4L255.4 407.9V375L287.5 342.9H339.4C341.5 348.7 347 352.9 353.6 352.9C361.9 352.9 368.6 346.2 368.6 337.9C368.6 329.6 361.9 322.9 353.6 322.9C347.1 322.9 341.5 327.1 339.4 332.9H297.5L327.5 303V278L349.1 256.5C351.1 257.4 353.3 258 355.6 258C363.9 258 370.6 251.3 370.6 243C370.6 234.7 363.9 228 355.6 228C347.3 228 340.6 234.7 340.6 243C340.6 245.3 341.1 247.5 342.1 249.5L327.6 264V218.2C333.4 216.1 337.6 210.6 337.6 204.1C337.6 195.8 330.9 189.1 322.6 189.1C314.3 189.1 307.6 195.8 307.6 204.1C307.6 210.6 311.8 216.2 317.6 218.2V264L303.1 249.5C304 247.5 304.6 245.3 304.6 243C304.6 234.7 297.9 228 289.6 228C281.3 228 274.6 234.7 274.6 243C274.6 251.3 281.3 258 289.6 258C291.9 258 294.1 257.5 296.1 256.5L317.7 278V298.9L290.7 325.9V306.1C296.5 304 300.7 298.5 300.7 292C300.7 283.7 294 277 285.7 277C277.4 277 270.7 283.7 270.7 292C270.7 298.5 274.9 304.1 280.7 306.1V335.9L255.7 360.9V214.1L276.3 193.6C278.3 194.5 280.5 195.1 282.8 195.1C291.1 195.1 297.8 188.4 297.8 180.1C297.8 171.8 291.1 165.1 282.8 165.1C274.5 165.1 267.8 171.8 267.8 180.1C267.8 182.4 268.3 184.6 269.3 186.6L250.8 205.1L232.3 186.6C233.2 184.6 233.8 182.4 233.8 180.1C233.8 171.8 227.1 165.1 218.8 165.1C210.5 165.1 203.8 171.8 203.8 180.1C203.8 188.4 210.5 195.1 218.8 195.1C221.1 195.1 223.3 194.6 225.3 193.6L245.9 214.1V319L209.8 283V254.2C215.6 252.1 219.8 246.6 219.8 240.1C219.8 231.8 213.1 225.1 204.8 225.1C196.5 225.1 189.8 231.8 189.8 240.1C189.8 246.6 194 252.2 199.8 254.2V273L171.7 245V217.2C177.5 215.1 181.7 209.6 181.7 203.1C181.7 194.8 175 188.1 166.7 188.1C158.4 188.1 151.7 194.8 151.7 203.1C151.7 209.6 155.9 215.2 161.7 217.2V249.1L192.7 280H174.9C172.8 274.2 167.3 270 160.7 270C152.4 270 145.7 276.7 145.7 285C145.7 293.3 152.4 300 160.7 300C167.2 300 172.8 295.8 174.9 290H202.7L245.8 333.1V408L222.8 385V356.2C228.6 354.1 232.8 348.6 232.8 342.1C232.8 333.8 226.1 327.1 217.8 327.1C209.5 327.1 202.8 333.8 202.8 342.1C202.8 348.6 207 354.2 212.8 356.2V375L179.3 341.5C180.2 339.5 180.8 337.3 180.8 335C180.8 326.7 174.1 320 165.8 320C157.5 320 150.8 326.7 150.8 335C150.8 343.3 157.5 350 165.8 350C168.1 350 170.3 349.5 172.3 348.5L205.8 382H188C185.9 376.2 180.4 372 173.8 372C165.5 372 158.8 378.7 158.8 387C158.8 395.3 165.5 402 173.8 402C180.3 402 185.9 397.8 188 392H215.8L243.9 420H104.5C100.2 420 96.7 416.5 96.7 412.2V279H61.3C56.1 279 52 274.8 52 269.7C52 267.2 53 264.9 54.7 263.1L242.2 73.4C246.7 68.8 254.1 68.8 258.7 73.3L258.8 73.4L356.7 172V153.8C356.7 149.5 360.2 146 364.5 146H397C401.3 146 404.8 149.5 404.8 153.8V220.7L446.4 263.1C450 266.8 450 272.7 446.3 276.3C444.6 278 442.2 279 439.8 279H404.9V412.2C404.9 416.5 401.4 420 397.1 420H257.5ZM173.3 393C170 393 167.3 390.3 167.3 387C167.3 383.7 170 381 173.3 381C176.6 381 179.3 383.7 179.3 387C179.3 390.3 176.6 393 173.3 393ZM217.4 348C214.1 348 211.4 345.3 211.4 342C211.4 338.7 214.1 336 217.4 336C220.7 336 223.4 338.7 223.4 342C223.4 345.3 220.7 348 217.4 348ZM165.3 341C162 341 159.3 338.3 159.3 335C159.3 331.7 162 329 165.3 329C168.6 329 171.3 331.7 171.3 335C171.3 338.3 168.6 341 165.3 341ZM160.3 291C157 291 154.3 288.3 154.3 285C154.3 281.7 157 279 160.3 279C163.6 279 166.3 281.7 166.3 285C166.3 288.3 163.6 291 160.3 291ZM285.5 298C282.2 298 279.5 295.3 279.5 292C279.5 288.7 282.2 286 285.5 286C288.8 286 291.5 288.7 291.5 292C291.5 295.3 288.8 298 285.5 298ZM353.6 344C350.3 344 347.6 341.3 347.6 338C347.6 334.7 350.3 332 353.6 332C356.9 332 359.6 334.7 359.6 338C359.6 341.3 356.9 344 353.6 344ZM327.6 392C324.3 392 321.6 389.3 321.6 386C321.6 382.7 324.3 380 327.6 380C330.9 380 333.6 382.7 333.6 386C333.6 389.3 330.9 392 327.6 392ZM355.6 249C352.3 249 349.6 246.3 349.6 243C349.6 239.7 352.3 237 355.6 237C358.9 237 361.6 239.7 361.6 243C361.6 246.3 358.9 249 355.6 249ZM322.6 210C319.3 210 316.6 207.3 316.6 204C316.6 200.7 319.3 198 322.6 198C325.9 198 328.6 200.7 328.6 204C328.6 207.3 325.9 210 322.6 210ZM282.5 186C279.2 186 276.5 183.3 276.5 180C276.5 176.7 279.2 174 282.5 174C285.8 174 288.5 176.7 288.5 180C288.5 183.3 285.8 186 282.5 186ZM218.4 186C215.1 186 212.4 183.3 212.4 180C212.4 176.7 215.1 174 218.4 174C221.7 174 224.4 176.7 224.4 180C224.4 183.3 221.7 186 218.4 186ZM166.3 209C163 209 160.3 206.3 160.3 203C160.3 199.7 163 197 166.3 197C169.6 197 172.3 199.7 172.3 203C172.3 206.3 169.6 209 166.3 209ZM204.3 246C201 246 198.3 243.3 198.3 240C198.3 236.7 201 234 204.3 234C207.6 234 210.3 236.7 210.3 240C210.4 243.3 207.7 246 204.3 246ZM289.5 249C286.2 249 283.5 246.3 283.5 243C283.5 239.7 286.2 237 289.5 237C292.8 237 295.5 239.7 295.5 243C295.5 246.3 292.8 249 289.5 249Z'/%3E%3C/svg%3E");
height: 24px;
width: 24px;
margin-top: -12px;
padding-left: 8px;
padding-right: 18px;
}
.card-header > a {
margin-left: auto;
}
Styling is similar for both cards.
For cards w/o ha-card like “horizontal-stack” & “grid”:
code
type: vertical-stack
cards:
- type: custom:mod-card
card:
type: horizontal-stack
title: some title
cards: &ref_cards
- type: entity
entity: sun.sun
- type: button
entity: sun.sun
card_mod:
style: &ref_style
:first-child $: |
.card-header {
display: flex !important;
align-items: center;
color: red !important;
}
.card-header:before {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(47,166,242)' d='M257.5 420L286.6 391H313.4C315.5 396.8 321 401 327.6 401C335.9 401 342.6 394.3 342.6 386C342.6 377.7 335.9 371 327.6 371C321.1 371 315.5 375.2 313.4 381H282.4L255.4 407.9V375L287.5 342.9H339.4C341.5 348.7 347 352.9 353.6 352.9C361.9 352.9 368.6 346.2 368.6 337.9C368.6 329.6 361.9 322.9 353.6 322.9C347.1 322.9 341.5 327.1 339.4 332.9H297.5L327.5 303V278L349.1 256.5C351.1 257.4 353.3 258 355.6 258C363.9 258 370.6 251.3 370.6 243C370.6 234.7 363.9 228 355.6 228C347.3 228 340.6 234.7 340.6 243C340.6 245.3 341.1 247.5 342.1 249.5L327.6 264V218.2C333.4 216.1 337.6 210.6 337.6 204.1C337.6 195.8 330.9 189.1 322.6 189.1C314.3 189.1 307.6 195.8 307.6 204.1C307.6 210.6 311.8 216.2 317.6 218.2V264L303.1 249.5C304 247.5 304.6 245.3 304.6 243C304.6 234.7 297.9 228 289.6 228C281.3 228 274.6 234.7 274.6 243C274.6 251.3 281.3 258 289.6 258C291.9 258 294.1 257.5 296.1 256.5L317.7 278V298.9L290.7 325.9V306.1C296.5 304 300.7 298.5 300.7 292C300.7 283.7 294 277 285.7 277C277.4 277 270.7 283.7 270.7 292C270.7 298.5 274.9 304.1 280.7 306.1V335.9L255.7 360.9V214.1L276.3 193.6C278.3 194.5 280.5 195.1 282.8 195.1C291.1 195.1 297.8 188.4 297.8 180.1C297.8 171.8 291.1 165.1 282.8 165.1C274.5 165.1 267.8 171.8 267.8 180.1C267.8 182.4 268.3 184.6 269.3 186.6L250.8 205.1L232.3 186.6C233.2 184.6 233.8 182.4 233.8 180.1C233.8 171.8 227.1 165.1 218.8 165.1C210.5 165.1 203.8 171.8 203.8 180.1C203.8 188.4 210.5 195.1 218.8 195.1C221.1 195.1 223.3 194.6 225.3 193.6L245.9 214.1V319L209.8 283V254.2C215.6 252.1 219.8 246.6 219.8 240.1C219.8 231.8 213.1 225.1 204.8 225.1C196.5 225.1 189.8 231.8 189.8 240.1C189.8 246.6 194 252.2 199.8 254.2V273L171.7 245V217.2C177.5 215.1 181.7 209.6 181.7 203.1C181.7 194.8 175 188.1 166.7 188.1C158.4 188.1 151.7 194.8 151.7 203.1C151.7 209.6 155.9 215.2 161.7 217.2V249.1L192.7 280H174.9C172.8 274.2 167.3 270 160.7 270C152.4 270 145.7 276.7 145.7 285C145.7 293.3 152.4 300 160.7 300C167.2 300 172.8 295.8 174.9 290H202.7L245.8 333.1V408L222.8 385V356.2C228.6 354.1 232.8 348.6 232.8 342.1C232.8 333.8 226.1 327.1 217.8 327.1C209.5 327.1 202.8 333.8 202.8 342.1C202.8 348.6 207 354.2 212.8 356.2V375L179.3 341.5C180.2 339.5 180.8 337.3 180.8 335C180.8 326.7 174.1 320 165.8 320C157.5 320 150.8 326.7 150.8 335C150.8 343.3 157.5 350 165.8 350C168.1 350 170.3 349.5 172.3 348.5L205.8 382H188C185.9 376.2 180.4 372 173.8 372C165.5 372 158.8 378.7 158.8 387C158.8 395.3 165.5 402 173.8 402C180.3 402 185.9 397.8 188 392H215.8L243.9 420H104.5C100.2 420 96.7 416.5 96.7 412.2V279H61.3C56.1 279 52 274.8 52 269.7C52 267.2 53 264.9 54.7 263.1L242.2 73.4C246.7 68.8 254.1 68.8 258.7 73.3L258.8 73.4L356.7 172V153.8C356.7 149.5 360.2 146 364.5 146H397C401.3 146 404.8 149.5 404.8 153.8V220.7L446.4 263.1C450 266.8 450 272.7 446.3 276.3C444.6 278 442.2 279 439.8 279H404.9V412.2C404.9 416.5 401.4 420 397.1 420H257.5ZM173.3 393C170 393 167.3 390.3 167.3 387C167.3 383.7 170 381 173.3 381C176.6 381 179.3 383.7 179.3 387C179.3 390.3 176.6 393 173.3 393ZM217.4 348C214.1 348 211.4 345.3 211.4 342C211.4 338.7 214.1 336 217.4 336C220.7 336 223.4 338.7 223.4 342C223.4 345.3 220.7 348 217.4 348ZM165.3 341C162 341 159.3 338.3 159.3 335C159.3 331.7 162 329 165.3 329C168.6 329 171.3 331.7 171.3 335C171.3 338.3 168.6 341 165.3 341ZM160.3 291C157 291 154.3 288.3 154.3 285C154.3 281.7 157 279 160.3 279C163.6 279 166.3 281.7 166.3 285C166.3 288.3 163.6 291 160.3 291ZM285.5 298C282.2 298 279.5 295.3 279.5 292C279.5 288.7 282.2 286 285.5 286C288.8 286 291.5 288.7 291.5 292C291.5 295.3 288.8 298 285.5 298ZM353.6 344C350.3 344 347.6 341.3 347.6 338C347.6 334.7 350.3 332 353.6 332C356.9 332 359.6 334.7 359.6 338C359.6 341.3 356.9 344 353.6 344ZM327.6 392C324.3 392 321.6 389.3 321.6 386C321.6 382.7 324.3 380 327.6 380C330.9 380 333.6 382.7 333.6 386C333.6 389.3 330.9 392 327.6 392ZM355.6 249C352.3 249 349.6 246.3 349.6 243C349.6 239.7 352.3 237 355.6 237C358.9 237 361.6 239.7 361.6 243C361.6 246.3 358.9 249 355.6 249ZM322.6 210C319.3 210 316.6 207.3 316.6 204C316.6 200.7 319.3 198 322.6 198C325.9 198 328.6 200.7 328.6 204C328.6 207.3 325.9 210 322.6 210ZM282.5 186C279.2 186 276.5 183.3 276.5 180C276.5 176.7 279.2 174 282.5 174C285.8 174 288.5 176.7 288.5 180C288.5 183.3 285.8 186 282.5 186ZM218.4 186C215.1 186 212.4 183.3 212.4 180C212.4 176.7 215.1 174 218.4 174C221.7 174 224.4 176.7 224.4 180C224.4 183.3 221.7 186 218.4 186ZM166.3 209C163 209 160.3 206.3 160.3 203C160.3 199.7 163 197 166.3 197C169.6 197 172.3 199.7 172.3 203C172.3 206.3 169.6 209 166.3 209ZM204.3 246C201 246 198.3 243.3 198.3 240C198.3 236.7 201 234 204.3 234C207.6 234 210.3 236.7 210.3 240C210.4 243.3 207.7 246 204.3 246ZM289.5 249C286.2 249 283.5 246.3 283.5 243C283.5 239.7 286.2 237 289.5 237C292.8 237 295.5 239.7 295.5 243C295.5 246.3 292.8 249 289.5 249Z'/%3E%3C/svg%3E");
height: 24px;
width: 24px;
margin-top: 0px;
padding-left: 8px;
padding-right: 18px;
}
- type: custom:mod-card
card:
type: grid
title: some title
cards: *ref_cards
card_mod:
style: *ref_style
Note a difference in “margin-top: 0px;” for this style.
I have no idea why I have to set a negative margin to the Entities & history-graph cards.