How to replace jQuery DatePicker previous/next buttons with MDL icons?

Question

How can DatePicker's default jQuery UI buttons be replaced with MDL icons? Following jQuery's documentation, it should be doable like so:

$('.datepicker-holder').datepicker({
    nextText:   '<button class="mdl-button mdl-js-button mdl-button--primary">' +
                    '<i class="material-icons">navigate_next</i>' +
                '</button>'
});

But instead of rendering MDL icons, it renders same old jQuery UI buttons. Here is the output:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="<button class=&quot;mdl-button mdl-js-button mdl-button--primary&quot;><i class=&quot;material-icons&quot;>navigate_next</i></button>">
    <span class="ui-icon ui-icon-circle-triangle-e">
        <button class="mdl-button mdl-js-button mdl-button--primary">
            <i class="material-icons">navigate_next</i>
        </button>
    </span>
</a>

I suspect it is this class that's causing the issueui-icon ui-icon-circle-triangle-e, when removed it renders the right icons, but removing classes from elements after they rendered just doesn't seem like the right way to do it.