Button not expanding on its own based on font size in valo

Flow
1

We are using valo theme and when i set the button icon with font-size 38px; the button is not expanding properly accroding to the content and I have to set the height and width of button explicitly. Also the icon is not aligned properly in the button. My expectation is that the icon should be in center by default and button should expand on its own but that is not happening.
Is there an issue with the button or i am doing something wrong.

Below is the style definition:

@mixin button-icon-font($font-size: $default-icon-font-size, $background: none, $border: none) {
font-size: $font-size;
line-height: $font-size;
width: $font-size;
height: $font-size;
//do not want button background or border or box even on hover or after click
background: $background;
border: $border;
box-shadow: none;

&:hover{
    &::after{
        border: $border;
        background: $background;
    }
}

&:focus{
    &::after {
        border: $border;
        box-shadow: none;
    }
}

}

2

Explicit height will do that. Try this:

Button btn = new Button("Large icon");
btn.setIcon(FontAwesome.APPLE);
btn.addStyleName("huge-icon");
  .huge-icon {
    height: auto;
    
    .v-icon {
      font-size: 38px;
    }
  }