Icons

Icon in the generic sense can mean by image, svg, or font icon kit. Pretty Checkbox works with all three 🎉

Icons

Using icons is easy as eating pie 🥧. It can be done in three easy steps:

  1. Add p-icon to the root div
  2. Add your icon before the label
  3. Add an icon selector to the tag containing the icon font
<div class="pretty p-icon">
<input type="checkbox" />
<div class="state">
<i class="icon mdi mdi-check"></i>
<label>mdi-check</label>
</div>
</div>

Supported Icon Libraries

Pretty Checkbox has been tested with the following font icons libraries:

SVG

Similar to icon, using SVG images requires the same three basic steps:

  1. Add p-svg to the root div
  2. Add your svg before the label
  3. Add a svg selector to the tag containing the SVG element
<div class="pretty p-svg">
<input type="checkbox" />
<div class="state">
<svg viewbox="0 0 24 24" class="svg">
<path fill="#fff" d="..." />
</svg>
<label>mdi-check</label>
</div>
</div>

Supported SVG Libraries

Images

Last, but surely not least, images are supported, too:

  1. Add p-image to the root div
  2. Add your svg before the label
  3. Add an image selector to the tag containing the img element
<div class="pretty p-image">
<input type="checkbox" />
<div class="state">
<img src="checkmark.png" alt="check" class="image" />
<label>check (via <code>img</code>)</label>
</div>
</div>
check
Edit this page