diff --git a/core/api.txt b/core/api.txt
index 0c58b40aa5..90dd898080 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -225,6 +225,7 @@ ion-checkbox,css-prop,--border-radius
ion-checkbox,css-prop,--border-style
ion-checkbox,css-prop,--border-width
ion-checkbox,css-prop,--checkmark-color
+ion-checkbox,css-prop,--checkmark-width
ion-checkbox,css-prop,--size
ion-checkbox,css-prop,--transition
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index ed49019846..0c3b6e9a77 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -10,6 +10,7 @@
--border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style};
--border-color: #{$checkbox-md-icon-border-color-off};
+ --checkmark-width: 3;
// Background
--background: #{$checkbox-md-icon-background-color-off};
@@ -27,7 +28,6 @@
.checkbox-icon path {
stroke-dasharray: 30;
stroke-dashoffset: 30;
- stroke-width: 3;
}
// Material Design Checkbox: Checked / Indeterminate
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index d18cc2fcb9..2af31588e0 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -19,10 +19,12 @@
* @prop --transition: Transition of the checkbox icon
*
* @prop --checkmark-color: Color of the checkbox checkmark when checked
+ * @prop --checkmark-width: Stroke width of the checkbox checkmark
*/
--background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)};
+ --checkmark-width: 1;
--transition: none;
display: inline-block;
@@ -65,7 +67,7 @@ button {
.checkbox-icon path {
fill: none;
stroke: var(--checkmark-color);
- stroke-width: 1;
+ stroke-width: var(--checkmark-width);
opacity: 0;
}
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 094d573e6b..9fe619b517 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -218,6 +218,7 @@ export const CheckboxExample: React.FC = () => (
| `--border-style` | Border style of the checkbox icon |
| `--border-width` | Border width of the checkbox icon |
| `--checkmark-color` | Color of the checkbox checkmark when checked |
+| `--checkmark-width` | Stroke width of the checkbox checkmark |
| `--size` | Size of the checkbox icon |
| `--transition` | Transition of the checkbox icon |
diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html
index 6ed2ee8ab0..69634c0249 100644
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -76,6 +76,11 @@
+
+ Checkmark width
+
+
+
Unchecked by Default