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