--br-font-size is not working on angular

[smimar]

Hi,
I am trying to make the size of the stars smaller but no matter what I do I can't get them smaller than their default size. I am using ionic/angular/capacitor combination.

.html
<bar-rating class="rating" [rate]="rating" [readOnly]="true" [max]="5" [theme]="'stars'">

.css
.rating{
style="--br-font-size:10px;"
}

[MurhafSousli]

You are using the stars theme which is based on a star image, font-size won't help with this theme! instead change the height and the width like the following:

.rating {
  ::ng-deep {
    .br-unit-inner {
      width: 10px;
      height: 10px;
    }
  }
}

If you want to change the star that changes with the font size, use the default theme, like in this stackblitz

[smimar]

Thanks

[MurhafSousli]

In version 5, you can use --br-font-size to change the size of the star