Bubble Card Separator Size Icon

[president75]

Good evening everyone,
I'm using Bubble Card with Card-mod3, can you help me understand how to increase the size of the separator icon.

type: custom:bubble-card
card_type: separator
name: LUCI
icon: mdi:light-recessed
styles: |
.separator-container div:last-child {
opacity: 1 !important;
background-color: #72F3CD !important;
height: 2px !important;
}

• {
  font-size: 20px !important;
  }

I opened an issue and Clooos replied telling me to insert this command into the code.

styles: |

• {
  --mdc-icon-size: 10px;
  align-items: center;
  }

The command can decrease the size of the icon but does not allow it to increase.

Can anyone help me

[Clooos]

I guess that you need to increase the width and the height too to allow it to be bigger, if it don't works I will take a closer look at this.

[president75]

Could you tell me where to enter the height and width in the code indicated!?

[Clooos]

I will have to try that but I don't have my computer right now.

[president75]

Hi Clooos,

I solved. I found where to act to change the height of the container.
I leave the code for everyone.

Thanks again for the help

type: custom:bubble-card
card_type: separator
icon: mdi:light-recessed
icon_style:
width: 50px
height: 50px
name: LUCI
styles: |
.separator-container div:last-child {
opacity: 1 !important;
background-color: #72F3CD !important;
height: 2px !important;
}

• {
  font-size: 25px !important;
  --mdc-icon-size: 40px;
  align-items: center;
  }
  .separator-container div ha-icon {
  height: 40px !important;
  width: 40px !important;
  }

[Clooos]

Really glad to ear that! But you can remove this, this YAML is not doing anything:

icon_style:
  width: 50px
  height: 50px