CODEWITHSUNDEEP
ionic-frameworkionic4
Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

ionic 4 increase checkbox icon size

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.

enter image description here

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;
}

Upvotes: 4

Views: 4676

Answers (2)

H S W
H S W

Reputation: 7129

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>

Upvotes: 2

M. Choen
M. Choen

Reputation: 26

You cannot style the icon size, since it's a Shadow DOM.

Shadow DOM can be styled only if CSS4 variables are in use (which is not the case here).

(see article)

Upvotes: 0

Related Questions