Icon 图标

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.

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