How can we change the default icons of the providers?

[dorutuu]

[dorutuu]

I really want to change the apple logo into the Calendar icon from the iPhone or Mac

[dorutuu]

I'm using the react component if helps 😃

[jekuer]

Unfortunately, there is no easy way to do this at the moment.
We are considering moving the icons into the css part in the future - this would make it easier adjustable.
For now, please have a look at #421 - there, we highlight a potential workaround to add your own icon or similar.

[dorutuu]

I added the buttonStyle to "custom" and it's the same result.

I just want the same functionality only with a different icon.

I can use the react one or the other one, doesn't matter.
Thanks a lot in advance 🙏🏻

[dorutuu]

Sorry if none of this made sense, after I click on the button my code renders a modal like this:

How can I change the default Apple logo from there? can I overwrite it somehow, I've tried everything so far and none of it work

[jekuer]

Can you please share your source code or a link to a page (or demo) where you have implemented this - as this is far away from the default?

[dorutuu]

https://codesandbox.io/p/sandbox/add-to-calendar-q3lwhm?file=%2Fsrc%2FApp.tsx

Let me know if you can see it

I was thinking if you gave a id or a class to the svg I believe I can ovewrite it with mask-image or something, but that's just a thought.

Thanks a lot

[jekuer]

Alright. As this is not officially supported at the moment, I cannot really support here in detail.
I would recommend you build the modal on your own and use individual buttons per type (as you did on the main level already).
We are planning to optimize here in the near future - however, near won't be in the next 2 months.

You can get to a hacky solution by using a custom style, where you infuse the icon ::before the option-text container, while hidding the actual icon via the respective official option. However, as said, no official solution; will take some time and sweat to get this running. Would not recommend it.