Switch

<div class="display-flex align-items-center gap-1 margin-bottom-3">
  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="">
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
    </div>
  </label>

  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="" checked>
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
    </div>
  </label>
</div>

<div class="display-flex align-items-center gap-1 margin-bottom-3">
  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="">
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>

  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="" checked>
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>
</div>

<div class="display-flex align-items-center gap-1 margin-bottom-3">
  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="">
    <div class="switch__track">
    </div>
    <div class="switch__thumb switch__thumb--with-icon">
      <div class="switch__icon switch__icon--off">
        <span class="material-icons">close</span>
      </div>
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>

  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="" checked>
    <div class="switch__track">
    </div>
    <div class="switch__thumb switch__thumb--with-icon">
      <div class="switch__icon switch__icon--off">
        <span class="material-icons">close</span>
      </div>
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>
</div>

<div class="display-flex align-items-center gap-1">
  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="" disabled>
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>

  <label class="switch">
    <input type="checkbox" id="switch_1" name="" value="" checked disabled>
    <div class="switch__track">
    </div>
    <div class="switch__thumb">
      <div class="switch__icon switch__icon--on">
        <span class="material-icons">check</span>
      </div>
    </div>
  </label>
</div>