FullCalendar custom button icon not showing

Question

      $('#calendar').fullCalendar({
         header: {
                    left: /*'prev,next'*/'BackwardButton,ForwardButton',
                    center: 'title',
                    right: '',
                },             
                customButtons: {                    
                    ForwardButton: {
                        //text: 'Framåt',
                        click: function () {
                        
                        }
                    },
                    BackwardButton: {
                        //text: 'Bakåt',
                        click: function () {
                         
                            



                        }
                    }
                },
                                buttonsIcons: {
                    BackwardButton: 'left-single-arrow',
                    ForwardButton: 'right-single-arrow',
                },
      
      });

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>



<div id="calendar"></div>

I am working with FullCalender.io. I have two custom buttons that I would like to add the default chevron or arrow to. I found these properties, but I can't figure out where in the full calendar initialization I should put it. Nothing have worked so far. I only get the text 'undefined'. Any ides anybody?

      jQuery('#calendar').fullCalendar({
            header: {
                left: 'BackwardButton,ForwardButton',
                center: 'title',
                right: '',
            },             
            customButtons: {                    
                ForwardButton: {
                    //text: 'Framåt',
                    click: function () {

                    }
                },
                BackwardButton: {
                    //text: 'Bakåt',
                    click: function () {

                }
            },
            buttonsIcons: {
                BackwardButton: 'left-single-arrow',
                ForwardButton: 'right-single-arrow',
            }
        });

Answer 1

Edit: the code below works, however OP's code was correct barring a typo (should have been buttonIcons instead of buttonsIcons). See @ADyson's JSFiddle here: http://jsfiddle.net/sbxpv25p/510/

Original:

I think this might be what you're after: https://codepen.io/anon/pen/KoLZXq

It looks like you were trying to add the icons in the wrong place:

$("#calendar").fullCalendar({
    header: {
        left: "BackwardButton, ForwardButton",
        center: "title"
    },
    customButtons: {
        ForwardButton: {
            icon: "right-single-arrow",
            click: function() {}
        },
        BackwardButton: {
            icon: "left-single-arrow",
            click: function() {}
        }
    }
})

Note how each button has an icon property now.