Can svg image be used as the icon for the React Full Calendar v4 'customButtons'?

Question

I am trying to display a 'filterIcon' before the text of customButtons. Following the docs of React Fullcalendar, it suggests to use 'icon' key to the 'customButtons' object, which I did - but after doing so, only an empty button is displayed in the browser. What would be the best approach to solve this issue?

SVG image:

import filterLine from 'images/NewIcons/filterlines.svg';

Calendar properties

export const CALENDAR_PROPERTIES = {
    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
    header: {
        left: 'prev, title, next',
        right: 'today, dayGridMonth, timeGridWeek, timeGridDay, myCustomButton ',
    },
    views: {},
    weekends: true,
    allDaySlot: false,
    editable: true,
    droppable: false,
    columnHeader: true,
    dayMinWidth: true,
    buttonText: {
        today: 'Today',
        month: 'Month',
        week: 'Week',
        day: 'Day',
    },
    nowIndicator: false,
    timeZone: 'UTC',
    eventLimit: true,
    selectable: true,
    selectHelper: false,
    weekNumbers: true,
};

Function handling the calendar initialization:

handleCalendar(calendarEl) {
   const { tours } = this.props;
   const events = this.getEvents(tours);
   calendar = new Calendar(calendarEl, {
        ...CALENDAR_PROPERTIES,
        events,
        eventPositioned: this.handleEventPositioned,
        loading: loadingCalendar => this.setState({ loadingCalendar }),
        select: this.handleDateSelect,
        eventDrop: this.handleEventDrop,
        eventClick: this.handleEventClick,
        customButtons: {
            myCustomButton: {
                text: 'Filter',
                **icon: filterLine,**
                click: () => {
                    this.setState({ isTourItemModalOpen: true });
                },
            },
        },
        columnHeaderFormat: { weekday: 'long' },
    });
}

Button before adding the icon:

Button after adding the icon: