如何在Ionic中单独放大复选框的勾选标记尺寸？

我需要在不改变复选框矩形区域尺寸（固定为20x20）的前提下，单独放大勾选标记的尺寸：从当前的8.4 x 5.87调整为11 x 9。

状态说明 #

• 当前状态：复选框为20x20矩形，勾选标记尺寸较小（8.4x5.87）
• 期望状态：复选框仍为20x20矩形，勾选标记放大至11x9

当前代码 #

<template>
  <ion-checkbox :checked="isStateSelected(state.name)" class="h-5 w-5 ml-auto" />
</template>
<style scoped>
ion-checkbox {
    --size: 20px;
    --checkbox-background-checked: rgb(var(--sf-action));
    --checkmark-color: rgb(var(--txt-primary-color));
    --border-color-checked: rgb(var(--sf-action));
    --border-color:rgb(var(--br-default));
    --border-radius: 6px;
    /* zoom: 1.5; */
}

ion-checkbox::part(mark) {
    stroke-width: 1.5px;
    width: 25px;
    height: 25px; 
}
</style>

已尝试的无效方法 #

• 使用zoom: 1.5：会放大整个复选框，无法单独调整勾选标记
• 修改ion-checkbox::part(mark)的width和height：无效果，仅能调整stroke-width（描边宽度）

环境版本 #

"@nuxtjs/ionic": "^0.15.1",

"node_modules/@nuxtjs/ionic": {
    "version": "0.15.1",
    "resolved": "https://registry.npmjs.org/@nuxtjs/ionic/-/ionic-0.15.1.tgz",
    "integrity": "sha512-S6P+83fvJCNX6nAuiYl2YcHSy6G9pVDdUWwDhM4PDxABbCtklxu9J/pZdgfGESAuy3JyKBldOmnpefKk/5eaxg==",
    "dependencies": {
    "@capacitor/cli": "^6.1.0",
    "@capacitor/core": "^6.1.0",
    "@ionic/cli": "^7.2.0",
    "@ionic/vue": "^8.2.5",
    "@ionic/vue-router": "^8.2.5",
    "@nuxt/kit": "^3.12.3",
    "@unhead/vue": "^1.9.16",
    "ionicons": "^7.4.0",
    "pathe": "^1.1.2",
    "pkg-types": "^1.1.3",
    "ufo": "^1.5.3",
    "unimport": "^3.7.2"
    }
},

补充说明 #

之前找到过6年前的类似问题《Ionic 4 increase checkbox icon size》，但无有效解决方案，希望当前Ionic 8.x版本有可行的解决方式。

内容的提问来源于stack exchange，提问作者Peter Plevko