sl-checkbox custom icons

[mrbrahman]

Hi,

I'm trying to style the checkbox using custom icons (found in icon assets).

Unchecked: https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/assets/icons/circle.svg

Checked: https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/assets/icons/check2-circle.svg

I tried setting the parts thus:

sl-checkbox::part(indeterminate-icon) {
  background-image: url('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/assets/icons/1-circle.svg')
}

sl-checkbox::part(checked-icon) {
  background-image: url('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/assets/icons/check2-circle.svg')
}

But this is not producing the proper output. For e.g.

How can I fix this?

Thanks!

[claviska]

Here are a couple examples I've thrown together in the past:

https://codepen.io/claviska/pen/mdLKPPg
https://codepen.io/claviska/pen/poLqqxj

I'd like to make this easier in the future, but hopefully this gets you by for now.

[rstoneIDBS]

+1 for "make this easier in the future" :) I'm looking into using shoelace to replace/update/enhance a lot of "old" Polymer based web components and I need to try and keep the look and feel as close as possible to the old experience. The workaround above is OK, but being able to provide a specific set of icons to replace the standard shoelace ones would be better, or at least a way to specify your own icons.

[AndreyPatseiko]

I also wanted to make checkbox icon more heavier. (I've wanted set stroke-width="2")
But we don't have access to svg icon.
It was a tricky, but finally I use this code for do this.

 sl-checkbox { 
    &::part(checked-icon) {
        position: relative;
        color: transparent;

        &::after {
            content: '';
            text-align: center;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
           
            background-color: var(--sl-color-neutral-0);
            mask-position: center;
            mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g style="stroke: black" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" transform="translate(3.428571, 3.428571)"><path d="M0,5.71428571 L3.42857143,9.14285714"></path><path d="M9.14285714,0 L3.42857143,9.14285714"></path></g></svg>');
        }
    }
}