ionic 4 增加复选框图标大小答案

【问题标题】：ionic 4 increase checkbox icon sizeionic 4 增加复选框图标大小
【发布时间】：2020-08-10 19:34:19
【问题描述】：

我正在尝试增加ion-checkbox 中的图标大小，但我找不到办法。

我尝试了font-size、--size 属性，但它们增加了背景的整体宽度和高度，而不是检查图标。

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

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

图标的大小可以通过 style 中的 zoom 属性进行修改。

在 .scss 文件中

   .my-icon { zoom : 2.0;}

在 .html 文件中

<ion-icon class="my-icon"></ion-icon>

【讨论】：

【解决方案2】：

您无法设置图标大小的样式，因为它是 Shadow DOM。

只有在使用 CSS4 变量时才能设置阴影 DOM 的样式（此处不是这种情况）。

（见article）

【讨论】：