How to change default Google icon with custom svg?

[Hassam790]

I am using react wrapper package. currently I have configured following code. I want to change default google icon with custom svg.

<AddToCalendarButton
    name="Sample Event"
    description="Play with me!"
    startDate="2024-01-16"
    startTime="10:15"
    endTime="17:45"
    timeZone="Asia/Karachi"
    location="World Wide Web"
    options="'Google'"
    buttonsList
    size="4"
    customCss="src/assets/calendarButton.css"
    label="Add to Calendar"
    buttonStyle="custom"
></AddToCalendarButton>

[add-to-calendar]

1. You should add the "hideIconButton" option. This removes the default icons.
2. You can add your own content in front of the label via your custom css like the following (ask Google for svg examples):

#atcb-btn-1::before {
    content: 'X';
    margin-right: 8px;
}

Mind the identifier! The one in the example above is auto-generated. You can manually define this with the "identifier" option like this: identifier="my-custom-id".