Сделайте кнопку mo.js проверенной

Question

Создана кнопка с mo.js и анимоконсами.Это хорошо работает, но я хочу добавить checked класс.Когда кнопка загружается с этим классом, она должна быть проверена.Как я могу это сделать?

/**
 * demo.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2016, Codrops
 * http://www.codrops.com
 */
(function(window) {
  "use strict";

  // taken from mo.js demos
  function isIOSSafari() {
    var userAgent;
    userAgent = window.navigator.userAgent;
    return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);
  }

  // taken from mo.js demos
  function isTouch() {
    var isIETouch;
    isIETouch = navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
    return [].indexOf.call(window, "ontouchstart") >= 0 || isIETouch;
  }

  // taken from mo.js demos
  var isIOS = isIOSSafari(),
    clickHandler = isIOS || isTouch() ? "touchstart" : "click";

  function extend(a, b) {
    for (var key in b) {
      if (b.hasOwnProperty(key)) {
        a[key] = b[key];
      }
    }
    return a;
  }

  function Animocon(el, options) {
    this.el = el;
    this.options = extend({}, this.options);
    extend(this.options, options);

    this.checked = false;

    this.timeline = new mojs.Timeline();

    for (var i = 0, len = this.options.tweens.length; i < len; ++i) {
      this.timeline.add(this.options.tweens[i]);
    }

    var self = this;
    this.el.addEventListener(clickHandler, function() {
      if (self.checked) {
        self.options.onUnCheck();
      } else {
        self.options.onCheck();
        self.timeline.replay();
      }
      self.checked = !self.checked;
    });
  }

  Animocon.prototype.options = {
    tweens: [new mojs.Burst({})],
    onCheck: function() {
      return false;
    },
    onUnCheck: function() {
      return false;
    }
  };

  // grid items:
  var items = [].slice.call(document.querySelectorAll("ol.grid > .grid__item"));

  function init() {
    /* Icon 1 */
    var el1 = items[0].querySelector("button.icobutton"),
      el1span = el1.querySelector("span"),
      elCounter = el1.querySelector("span.icobutton__text");
    new Animocon(el1, {
      tweens: [
        // burst animation
        new mojs.Burst({
          parent: el1,
          radius: { 30: 90 },
          count: 6,
          children: {
            fill: "#C0C1C3",
            opacity: 0.6,
            radius: 15,
            duration: 1700,
            easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
          }
        }),
        // ring animation
        new mojs.Shape({
          parent: el1,
          type: "circle",
          radius: { 0: 60 },
          fill: "transparent",
          stroke: "#C0C1C3",
          strokeWidth: { 20: 0 },
          opacity: 0.6,
          duration: 700,
          easing: mojs.easing.sin.out
        }),
        // icon scale animation
        new mojs.Tween({
          duration: 1200,
          onUpdate: function(progress) {
            if (progress > 0.3) {
              var elasticOutProgress = mojs.easing.elastic.out(
                1.43 * progress - 0.43
              );
              el1span.style.WebkitTransform = el1span.style.transform =
                "scale3d(" +
                elasticOutProgress +
                "," +
                elasticOutProgress +
                ",1)";
            } else {
              el1span.style.WebkitTransform = el1span.style.transform =
                "scale3d(0,0,1)";
            }
          }
        })
      ],
      onCheck: function() {
        el1.style.color = "#988ADE";
        elCounter.innerHTML = Number(elCounter.innerHTML) + 1;
      },
      onUnCheck: function() {
        el1.style.color = "#C0C1C3";
        var current = Number(elCounter.innerHTML);
        elCounter.innerHTML =
          current > 1 ? Number(elCounter.innerHTML) - 1 : "";
      }
    });
    /* Icon 1 */
  }

  init();
})(window);

.icobutton {
  font-size: 1.75em;
  position: relative;
  margin: 0;
  padding: 0;
  color: #c0c1c3;
  border: 0;
  background: none;
  overflow: visible;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  width: 100%;
}

.icobutton__text {
  font-size: .65em;
  color: #a6a6a6;
  position: absolute;
  bottom: -1.25em;
  left: 50%;
  transform: translateX(-50%);
}

.icobutton svg {
  left: 0;
}

.icobutton:hover,
.icobutton:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<ol class="grid">
  <li class="grid__item">
    <button class="icobutton icobutton--thumbs-up checked">
      <span class="icobutton__icon far fa-thumbs-up"></span>
      <span class="icobutton__text icobutton__text--side">4</span>
    </button>
  </li>
</ol>