I'm trying to increase the icon size in ion-checkbox but I couldn't find a way to do.
I tried font-size, --size properties but they are increasing the overall width and height of the background instead of the check icon.

HTML
<ion-checkbox
color="secondary"
slot="start"
size="large">
</ion-checkbox>
CSS
ion-checkbox {
--background: var(--background-color);
--background-checked: var(--background-color);
--checkmark-color: var(--color-blue-medium);
--border-color: transparent;
--border-color-checked: transparent;
/* increasing overall width not the check icon size */
--size:48px;
}
Size of the icon can be modified by the zoom property in style.
In .scss file
.my-icon { zoom : 2.0;}
In .html file
<ion-icon class="my-icon"></ion-icon>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With