目录

Icon 图标

优质
小牛编辑
120浏览
2023-12-01

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" />