图标 - nek-ui

使用字体图标，可以很方便地在任何位置放置矢量图形。本主题的部分字体图标由Font Awesome提供。

代码演示

基本形式

<kl-icon type="home2" />

设置icon大小和颜色

<kl-icon type="home2" color="#E31436" fontSize="20" />

图标列表（点击图标按钮复制图标代码，下放代码请先忽视）

<kl-icon fontSize=20 type="glass" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="music" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="search" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="envelope-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="heart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="user" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="film" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="th-large" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="th" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="th-list" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="remove" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="close" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="times" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="search-plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="search-minus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="power-off" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="signal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gear" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cog" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trash-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="home" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="clock-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="road" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="download" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-o-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-o-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="inbox" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="play-circle-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rotate-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="repeat" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="refresh" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="list-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="lock" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flag" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="headphones" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="volume-off" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="volume-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="volume-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="qrcode" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="barcode" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tag" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tags" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="book" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bookmark" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="print" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="camera" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="font" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bold" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="italic" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="text-height" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="text-width" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="align-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="align-center" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="align-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="align-justify" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="list" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dedent" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="outdent" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="indent" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="video-camera" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="photo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="image" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="picture-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pencil" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="map-marker" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="adjust" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tint" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="edit" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pencil-square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="share-square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check-square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrows" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="step-backward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fast-backward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="backward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="play" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pause" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stop" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="forward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fast-forward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="step-forward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eject" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plus-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="minus-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="times-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="question-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="info-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="crosshairs" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="times-circle-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check-circle-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ban" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mail-forward" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="share" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="expand" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="compress" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="minus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="asterisk" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="exclamation-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gift" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="leaf" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fire" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eye" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eye-slash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="warning" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="exclamation-triangle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plane" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="random" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="comment" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="magnet" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="retweet" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="shopping-cart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="folder" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="folder-open" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrows-v" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrows-h" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bar-chart-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bar-chart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="twitter-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="facebook-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="camera-retro" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="key" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gears" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cogs" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="comments" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="thumbs-o-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="thumbs-o-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star-half" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="heart-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sign-out" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="linkedin-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="thumb-tack" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="external-link" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sign-in" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trophy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="github-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="upload" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="lemon-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="phone" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bookmark-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="phone-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="twitter" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="facebook-f" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="facebook" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="github" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="unlock" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="credit-card" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="feed" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rss" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hdd-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bullhorn" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bell" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="certificate" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-o-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-o-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-o-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-o-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="globe" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wrench" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tasks" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="filter" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="briefcase" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrows-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="group" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="users" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chain" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="link" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cloud" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flask" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cut" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="scissors" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="copy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="files-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paperclip" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="save" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="floppy-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="navicon" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="reorder" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bars" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="list-ul" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="list-ol" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="strikethrough" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="underline" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="table" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="magic" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="truck" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pinterest" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pinterest-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="google-plus-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="google-plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="money" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="columns" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="unsorted" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-desc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-asc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="envelope" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="linkedin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rotate-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="undo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="legal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gavel" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dashboard" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tachometer" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="comment-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="comments-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bolt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sitemap" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="umbrella" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paste" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="clipboard" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="lightbulb-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="exchange" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cloud-download" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cloud-upload" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="user-md" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stethoscope" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="suitcase" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bell-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="coffee" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cutlery" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-text-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="building-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hospital-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ambulance" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="medkit" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fighter-jet" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="beer" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="h-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plus-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-double-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-double-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-double-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-double-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="desktop" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="laptop" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tablet" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mobile-phone" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mobile" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="circle-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="quote-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="quote-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="spinner" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mail-reply" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="reply" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="github-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="folder-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="folder-open-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="smile-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="frown-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="meh-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gamepad" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="keyboard-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flag-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flag-checkered" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="terminal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="code" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mail-reply-all" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="reply-all" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star-half-empty" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star-half-full" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="star-half-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="location-arrow" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="crop" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="code-fork" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="unlink" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chain-broken" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="question" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="info" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="exclamation" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="superscript" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="subscript" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eraser" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="puzzle-piece" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="microphone" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="microphone-slash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="shield" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fire-extinguisher" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rocket" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="maxcdn" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-circle-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-circle-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-circle-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron-circle-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="html5" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="css3" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="anchor" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="unlock-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bullseye" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ellipsis-h" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ellipsis-v" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rss-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="play-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ticket" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="minus-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="minus-square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="level-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="level-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pencil-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="external-link-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="share-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="compass" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-square-o-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-square-o-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-square-o-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="euro" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eur" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gbp" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dollar" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="usd" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rupee" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="inr" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cny" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rmb" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="yen" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="jpy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ruble" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rouble" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rub" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="won" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="krw" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bitcoin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="btc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-text" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-alpha-asc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-alpha-desc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-amount-asc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-amount-desc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-numeric-asc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sort-numeric-desc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="thumbs-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="thumbs-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="youtube-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="youtube" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="xing" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="xing-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="youtube-play" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dropbox" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stack-overflow" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="instagram" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="flickr" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="adn" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bitbucket" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bitbucket-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tumblr" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tumblr-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="long-arrow-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="long-arrow-up" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="long-arrow-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="long-arrow-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="apple" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="windows" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="android" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="linux" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dribbble" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="skype" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="foursquare" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trello" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="female" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="male" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gittip" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gratipay" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sun-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="moon-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="archive" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bug" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="vk" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="weibo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="renren" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pagelines" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stack-exchange" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-o-right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="arrow-circle-o-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="caret-square-o-left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dot-circle-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wheelchair" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="vimeo-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="turkish-lira" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="try" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plus-square-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="space-shuttle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="slack" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="envelope-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wordpress" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="openid" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="institution" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bank" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="university" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mortar-board" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="graduation-cap" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="yahoo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="google" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="reddit" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="reddit-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stumbleupon-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="stumbleupon" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="delicious" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="digg" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pied-piper" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pied-piper-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="drupal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="joomla" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="language" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fax" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="building" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="child" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paw" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="spoon" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cube" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cubes" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="behance" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="behance-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="steam" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="steam-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="recycle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="automobile" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="car" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cab" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="taxi" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tree" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="spotify" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="deviantart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="soundcloud" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="database" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-pdf-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-word-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-excel-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-powerpoint-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-photo-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-picture-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-image-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-zip-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-archive-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-sound-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-audio-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-movie-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-video-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="file-code-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="vine" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="codepen" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="jsfiddle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="life-bouy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="life-buoy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="life-saver" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="support" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="life-ring" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="circle-o-notch" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ra" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rebel" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ge" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="empire" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="git-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="git" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="y-combinator-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="yc-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hacker-news" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tencent-weibo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="qq" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wechat" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="weixin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="send" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paper-plane" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="send-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paper-plane-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="history" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="circle-thin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="header" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paragraph" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sliders" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="share-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="share-alt-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bomb" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="soccer-ball-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="futbol-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tty" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="binoculars" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plug" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="slideshare" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="twitch" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="yelp" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="newspaper-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wifi" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calculator" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paypal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="google-wallet" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-visa" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-mastercard" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-discover" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-amex" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-paypal" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-stripe" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bell-slash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bell-slash-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="copyright" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="at" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="eyedropper" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="paint-brush" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="birthday-cake" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="area-chart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pie-chart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="line-chart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="lastfm" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="lastfm-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-off" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="toggle-on" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bicycle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ioxhost" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angellist" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="shekel" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sheqel" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ils" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="meanpath" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="buysellads" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="connectdevelop" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="dashcube" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="forumbee" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="leanpub" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sellsy" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="shirtsinbulk" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="simplybuilt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="skyatlas" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cart-plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cart-arrow-down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="diamond" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ship" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="user-secret" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="motorcycle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="street-view" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="heartbeat" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="venus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mars" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mercury" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="intersex" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="transgender" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="transgender-alt" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="venus-double" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mars-double" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="venus-mars" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mars-stroke" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mars-stroke-v" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mars-stroke-h" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="neuter" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="genderless" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="facebook-official" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="pinterest-p" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="whatsapp" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="server" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="user-plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="user-times" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hotel" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="bed" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="viacoin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="train" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="subway" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="medium" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="yc" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="y-combinator" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="optin-monster" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="opencart" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="expeditedssl" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-4" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-full" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-3" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-three-quarters" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-half" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-1" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-quarter" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-0" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="battery-empty" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="mouse-pointer" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="i-cursor" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="object-group" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="object-ungroup" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sticky-note" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="sticky-note-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-jcb" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="cc-diners-club" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="clone" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="balance-scale" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-1" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-start" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-half" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-3" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass-end" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hourglass" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-grab-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-rock-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-stop-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-paper-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-scissors-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-lizard-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-spock-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-pointer-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="hand-peace-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trademark" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="registered" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="creative-commons" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gg" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="gg-circle" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tripadvisor" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="odnoklassniki" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="odnoklassniki-square" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="get-pocket" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="wikipedia-w" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="safari" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chrome" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="firefox" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="opera" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="internet-explorer" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="tv" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="television" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="contao" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="500px" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="amazon" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar-plus-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar-minus-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar-times-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar-check-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="industry" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="map-pin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="map-signs" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="map-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="map" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="commenting" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="commenting-o" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="houzz" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="vimeo" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="black-tie" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="fonticons" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="import" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="export" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="zoomin" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rezoom" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="delete" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="zoomout" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rezoom2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="rotate_right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="retry" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="warning" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="edit" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="info" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="error" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="success" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron_left" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="chevron_right" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="search" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="remove" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="ok" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="check_empty" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="angle_down" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="add" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="success2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="error2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="warning2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="info2" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="calendar" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="line" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="download" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="trash" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="upload" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="plus" on-click={this.copy($event)} />
<kl-icon fontSize=20 type="home2" on-click={this.copy($event)} />

var component = new NEKUI.Component({
    template: template,
    copy: function(e) {
        var type = e.target.className.trim();
        type = type.slice(14)
        var text = '<kl-icon type="' + type + '" />'
        var copyFrom, body;
        copyFrom = document.createElement('textarea');
        copyFrom.textContent = text;
        body = document.getElementsByTagName('body')[0];
        body.appendChild(copyFrom);
        copyFrom.select();
        document.execCommand('copy');
        body.removeChild(copyFrom);
        NEKUI.Notify.success(text + '复制成功')
    }
});

API

Classes

KLIcon

Functions

config()

KLIcon

Kind: global class
Extend: Component

new KLIcon()

Param	Type	Description
[options.data]	`object`	= 绑定属性
[options.data.class]	`string`	=> 补充class
[options.data.type]	`string`	=> 补充class
[options.data.fontSize]	`string`	=> 设置图标胆小
[options.data.color]	`string`	=> 设置图标颜色

config()

Kind: global function
Access: protected

文字提示 →

布局

表单

通知

导航

其它

代码演示

基本形式

设置icon大小和颜色

图标列表（点击图标按钮复制图标代码，下放代码请先忽视）

API

Classes

Functions

KLIcon

new KLIcon()

config()