title: Change bullets of li to an icon using css
body: <p>I have an ul which is being rendered dynamically through syncfusion.
  The rendered html is below:</p>
  
  <pre><code>&lt;ul id="listCa" class="e-listbox e-js e-ul" data-ej-unselectable="on" style="user-select: none; cursor: pointer;" aria-expanded="true"&gt;
      &lt;li style="" value="8" class="e-draggable e-droppable e-js"&gt;Loading of your furniture and personal effects in an air container&lt;/li&gt;
      &lt;li style="" value="6" class="e-draggable e-droppable e-js"&gt;Packing and wrapping of all items by trained and experienced AGS packing crew&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to have the below icon, instead of a bullet in the list.</p>
  
  <blockquote>
    <p>icon-delete</p>
  </blockquote>
  
  <p>Any idea how I can do this using css?
  Thanks</p>