How can i have checkboxes on options inside of an optgroup?

this is what i currently have

What i would like to have.

this is the code i am using:

<div class="input-field col s12">
    <select class="icons" multiple>
      <option value="" disabled selected>Choose the items you would like in this Case</option>
      <optgroup class="multiple" label="Rarity 1">

      <option  value="1"  data-icon="http://ift.tt/2cAskHn" class="circle blue lighten-3">example 1</option>
      <option value="2" data-icon="http://ift.tt/2cAskHn" class="circle blue lighten-3" >example 2</option>
      <option value="3" data-icon="http://ift.tt/2cAskHn" class="circle blue lighten-3" >example 1</option>
      </optgroup>
      <optgroup label="Rarity 2">
      <option value="4" data-icon="http://ift.tt/2cAskHn" class="circle red lighten-3">example 1</option>
      <option value="5" data-icon="http://ift.tt/2cAskHn" class="circle red lighten-3">example 2</option>
      <option value="6" data-icon="http://ift.tt/2cAskHn" class="circle red lighten-3">example 1</option>
      </optgroup>
    <optgroup label="Rarity 3">
      <option value="7" data-icon="http://ift.tt/2cAskHn" class="circle green lighten-3">example 1</option>
      <option value="8" data-icon="http://ift.tt/2cAskHn" class="circle green lighten-3">example 2</option>
      <option value="9" data-icon="http://ift.tt/2cAskHn" class="circle green lighten-3">example 1</option>
      </optgroup>
    <optgroup label="Rarity 4">
      <option value="10" data-icon="http://ift.tt/2cAskHn" class="circle purple lighten-3">example 1</option>
      <option value="11" data-icon="http://ift.tt/2cAskHn" class="circle purple lighten-3">example 2</option>
      <option value="12" data-icon="http://ift.tt/2cAskHn" class="circle purple lighten-3">example 1</option>
      </optgroup>
    </select>
    <label>Items</label>
  </div>

i'm using the framework Materialize, which you can see here:

materializecss.com

Thanks for any help.