Bubble Card separator icon size

[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. I'm going crazy but I can't.

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](https://www.facebook.com/hashtag/72f3cd?__eep__=6&__cft__[0]=AZUfO8b7nCCD0mDZr1zCB_yrsSsEYDZQ9HZl1gn44vKxULicgKCd3_MMDYYpVcqBlvoJKO2kRr1XLBWsg7h0docb43SG7-KtbOadPbxaYPD8zOa6arwptV982EYs2IwpVwgKWM6lAc6mH7NCYc8U9gki7HTMJl9DctqIdytDnoLznTMXPOmcuuSRiDHwb1LYO5c&__tn__=*NK-R) !important;
    height: 2px !important;
  }
  * {
        font-size: 20px !important;
  }

[Clooos]

Hi! I’ve just tested it, and it doesn’t work with font-size indeed, but it works this way:

styles: |
  * {
    --mdc-icon-size: 10px;
    align-items: center;
  }

Additionally, in your YAML, you are not using Card-mod but the default Bubble Card custom styles. Keep it like this because this approach is the recommended way to achieve that.

Card-mod styles are like this:

card_mod:
  style: |
    ha-card {
      color: red;
    }

[president75]

the code shown seems to work to decrease the size of the icon but not to increase it!?

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;
        --mdc-icon-size: 25px !important;
        align-items: center
  }