Support custom icon in toggle button

[glensomerville]

It would be great to be able to apply a custom SVG icon to the toggle button. Is there any possibility that this might be on a future feature list?

[glensomerville]

I've dabbled with a PR, but it seems that it would require a <slot> element that uses the current SVG icon as default but in order to override that the main component would need to use the shadow: true property. Is this something that is undesirable? I suspect that it is due to losing accessibility (sorry I'm pretty new to strict accessibility adherence)?

Another option would be using an empty <slot /> in date-picker-input.tsx but that would perhaps mean that every instance where the component is used would require the icon to be defined as a child which is far from ideal. Could the icon be passed as a prop to the component as in React?

Apologies for the fairly newbie questions as I'm not very familiar with Web Components or the Stencil library.

[mathiasha]

I am looking for the same functionality. Is there any way to use a different calendar icon than the default?

[Wahaj10]

I'm also looking into this as well. Did you guys find out if it's possible?

[WickyNilliams]

I wonder if we can allow for a base64 encoded svg passed as a css var as part of the theme. Seems like it's an easy way to set it just once, avoiding the issues mentioned above with slots

[adamtomat]

Agreed, native support would be nice. For those looking for a work around, you can use CSS:

.duet-date__toggle-icon {
    position: relative;
}

.duet-date__toggle-icon svg {
    display: none;
}

.duet-date__toggle-icon:before {
    position: absolute;
    top: 50%;
    right: 10px;

    width: 18px;
    height: 20px;

    background-image: url('../img/icon-calendar.svg');
    transform: translateY(-50%);

    content: '';
}

[jonnystening]

This feature would be greatly appreciated. Have successfully implemented something similar to above, but doesn't feel right having a CSS hidden SVG buried in the markup.

[ashleyfigure]

I'm looking for the same functionality. Using CSS won't work if you are trying to support high contrast mode as it doesn't recognize background images. Would love to see a solution to this please!

[jonnystening]

@ashleyfigure perhaps leverage @media (prefers-contrast: more)?

Show the original icon for high contrast users (not our custom icon, but better than no icon). It won't help high contrast users in IE unfortunately, a bit clunky to implement but a better solution in the interim?

Something like...

/* Implement a custom toggle icon */
.duet-date__toggle-icon {
	width: {YOUR_CUSTOM_ICON_WIDTH};
	height: {YOUR_CUSTOM_ICON_HEIGHT};
	background-image: url({YOUR_CUSTOM_ICON_URL_OR_DATA_URI});
	background-size: cover;
}
.duet-date__toggle-icon svg {
	display: none;
}

/* Roll back the above for HCM users */
@media (prefers-contrast: more) {
	.duet-date__toggle-icon {
		width: auto;
		height: auto;
		background-image: none;
		background-size: auto;
	}
	.duet-date__toggle-icon svg {
		display: block;
	}
}