Icons

Icons are single-element and pure CSS icons, LCUI’s icons are from the Material Design Icons.

Examples

Icon and text are the same, we can use the icon widget to display it, just as in the example below. For highlight the icons effect, the icons example has been increased in size, and added a border.

<w type="icon" name="checkbox-multiple-marked-outline" />
<w type="icon" name="chevron-double-down" />
<w type="icon" name="chevron-double-left" />
<w type="icon" name="chevron-double-right" />
<w type="icon" name="chevron-double-up" />
<w type="icon" name="chevron-down" />
<w type="icon" name="chevron-left" />
<w type="icon" name="chevron-right" />
<w type="icon" name="chevron-up" />
<w type="icon" name="sleep" />
<w type="icon" name="sleep-off" />
<w type="icon" name="clock" />
<w type="icon" name="clock-alert" />
<w type="icon" name="sort" />
<w type="icon" name="sort-alphabetical" />
<w type="icon" name="sort-ascending" />
<w type="icon" name="sort-descending" />
<w type="icon" name="sort-numeric" />
<w type="icon" name="note-multiple-outline" />
<w type="icon" name="alarm" />
<w type="icon" name="alarm-check" />
<w type="icon" name="alert" />
<w type="icon" name="alert-circle" />
<w type="icon" name="alert-decagram" />
<w type="icon" name="close" />
<w type="icon" name="close-circle" />
<w type="icon" name="close-octagon" />
<w type="icon" name="cancel" />
<w type="icon" name="fullscreen" />
<w type="icon" name="fullscreen-exit" />
<w type="icon" name="code-braces" />
<w type="icon" name="code-brackets" />
<w type="icon" name="code-tags" />
<w type="icon" name="code-tags-check" />
<w type="icon" name="gender-female" />
<w type="icon" name="gender-male" />
<w type="icon" name="gender-male-female" />
<w type="icon" name="gender-transgender" />
<w type="icon" name="gesture-double-tap" />
<w type="icon" name="gesture-tap" />
<w type="icon" name="gesture-swipe-left" />
<w type="icon" name="gesture-swipe-right" />
<w type="icon" name="gesture-swipe-up" />
<w type="icon" name="gesture-swipe-down" />
<w type="icon" name="glasses" />
<w type="icon" name="comment-alert" />
<w type="icon" name="comment-alert-outline" />
<w type="icon" name="comment-check" />
<w type="icon" name="comment-check-outline" />
<w type="icon" name="comment-multiple-outline" />
<w type="icon" name="comment-outline" />
<w type="icon" name="comment-plus-outline" />
<w type="icon" name="comment-processing" />
<w type="icon" name="comment-processing-outline" />
<w type="icon" name="comment-question-outline" />
<w type="icon" name="comment-remove-outline" />
<w type="icon" name="comment-text" />
<w type="icon" name="comment-text-outline" />
<w type="icon" name="arrow-all" />
<w type="icon" name="arrow-bottom-right" />
<w type="icon" name="arrow-expand" />
<w type="icon" name="arrow-expand-all" />
<w type="icon" name="arrow-left" />
<w type="icon" name="arrow-right" />
<w type="icon" name="arrow-up" />
<w type="icon" name="arrow-down" />
<w type="icon" name="arrow-down-bold" />
<w type="icon" name="arrow-down-bold-box" />
<w type="icon" name="arrow-down-bold-box-outline" />
<w type="icon" name="arrow-down-bold-circle" />
<w type="icon" name="arrow-down-bold-circle-outline" />
<w type="icon" name="arrow-down-bold-hexagon-outline" />
<w type="icon" name="content-copy" />
<w type="icon" name="content-cut" />
<w type="icon" name="content-paste" />
<w type="icon" name="palette" />
<w type="icon" name="paperclip" />
<w type="icon" name="home" />
<w type="icon" name="home-outline" />
<w type="icon" name="delete" />
<w type="icon" name="delete-circle" />
<w type="icon" name="delete-empty" />
<w type="icon" name="delete-forever" />
<w type="icon" name="magnify" />
<w type="icon" name="magnify-minus" />
<w type="icon" name="magnify-minus-outline" />
<w type="icon" name="magnify-plus" />
<w type="icon" name="magnify-plus-outline" />