WebRADDocumentationExplore WebRAD ↗
WEBRAD / TECHNICAL REFERENCE

Icon

Lucide icon, displayed statically or as a button without a caption.

WebIconStandardVisual8 events

Quick start

Add Icon1 in the Designer. Use the example in a page method.

Icon1 · event
Icon1.icon = 'settings';
Icon1.mode = 'button';
Icon1.accessibleLabel = 'Settings';
Icon1.strokeWidth = 2;
Icon1.onClick = () => { Message('Open settings'); };
// Icon1.click();
  • Choose the icon in the Inspector’s Lucide picker; the name is also typed in Monaco.
  • Mode = icon displays the image. Mode = button supports clicks, focus, Enter, and Space.
  • Configure accessibleLabel, strokeWidth, dimensions, and color. The component does not display a caption.
  • Link OnClick in Interaction to execute the action.

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

Property / sourceType and optionsDefaultRuntime access
nameName · Identitystring—name
xLeft · Size & positionnumber0x
yTop · Size & positionnumber0y
widthWidth · Size & positionnumber32width
heightHeight · Size & positionnumber32height
itemWidthResponsive width · Responsive sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.enumfixed stretch fit-content"fixed"Inspector / configuration
itemHeightResponsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.enumfixed stretch fit-content"fixed"Inspector / configuration
itemMinWidthMinimum width · Responsive sizenumber0Inspector / configuration
itemMaxWidthMaximum width · Responsive sizenumbernullInspector / configuration
itemMinHeightMinimum height · Responsive sizenumber0Inspector / configuration
itemMaxHeightMaximum height · Responsive sizenumbernullInspector / configuration
itemGrowGrow · Responsive sizenumber0Inspector / configuration
itemShrinkShrink · Responsive sizeAllows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed.booleantrueInspector / configuration
itemAlignSelfItem alignment · Responsive sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.enumauto start center end stretch"auto"Inspector / configuration
itemHorizontalAnchorHorizontal anchor · Anchors & offsetsenumstart center end stretch"start"Inspector / configuration
itemVerticalAnchorVertical anchor · Anchors & offsetsenumstart center end stretch"start"Inspector / configuration
itemLeftLeft inset · Anchors & offsetsnumber0Inspector / configuration
itemRightRight inset · Anchors & offsetsnumber0Inspector / configuration
itemTopTop inset · Anchors & offsetsnumber0Inspector / configuration
itemBottomBottom inset · Anchors & offsetsnumber0Inspector / configuration
marginMargin · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.number0margin
marginTopMargin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.number0Derived from saved propertiesmarginTop
marginRightMargin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.number0Derived from saved propertiesmarginRight
marginBottomMargin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.number0Derived from saved propertiesmarginBottom
marginLeftMargin left · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.number0Derived from saved propertiesmarginLeft
visibleVisible · Behaviorbooleantruevisible
collapseWhenHiddenCollapse when hidden · BehaviorRemoves the component from the layout while it is not visible.booleantruecollapseWhenHidden
enabledEnabled · Behaviorbooleantrueenabled
tabIndexTabIndex · Behaviornumber0tabIndex
iconIcon · Appearanceicon
1903 optionsa-arrow-down a-arrow-up a-large-small accessibility activity ad air-vent airplay alarm-clock-check alarm-clock-minus alarm-clock-off alarm-clock-plus alarm-clock alarm-smoke align-center-horizontal align-center-vertical align-end-horizontal align-end-vertical align-horizontal-distribute-center align-horizontal-distribute-end align-horizontal-distribute-start align-horizontal-justify-center align-horizontal-justify-end align-horizontal-justify-start align-horizontal-space-around align-horizontal-space-between align-start-horizontal align-start-vertical align-vertical-distribute-center align-vertical-distribute-end align-vertical-distribute-start align-vertical-justify-center align-vertical-justify-end align-vertical-justify-start align-vertical-space-around align-vertical-space-between ambulance ampersand ampersands amphora anchor angle antenna anvil aperture app-window-mac app-window apple archive-restore archive-x archive armchair armenian-dram arrow-big-down-dash arrow-big-down arrow-big-left-dash arrow-big-left arrow-big-right-dash arrow-big-right arrow-big-up-dash arrow-big-up arrow-down-0-1 arrow-down-1-0 arrow-down-a-z arrow-down-from-line arrow-down-left arrow-down-narrow-wide arrow-down-right arrow-down-to-dot arrow-down-to-line arrow-down-up arrow-down-wide-narrow arrow-down-z-a arrow-down arrow-left-from-line arrow-left-right arrow-left-to-line arrow-left arrow-right-from-line arrow-right-left arrow-right-to-line arrow-right arrow-up-0-1 arrow-up-1-0 arrow-up-a-z arrow-up-down arrow-up-from-dot arrow-up-from-line arrow-up-left arrow-up-narrow-wide arrow-up-right arrow-up-to-line arrow-up-wide-narrow arrow-up-z-a arrow-up arrows-up-from-line asterisk astroid at-sign atom audio-lines-off audio-lines-x audio-lines audio-waveform avocado award axe axis-3d baby backpack bacon badge-alert badge-cent badge-check badge-dollar-sign badge-euro badge-indian-rupee badge-info badge-japanese-yen badge-minus badge-percent badge-plus badge-pound-sterling badge-question-mark badge-russian-ruble badge-swiss-franc badge-turkish-lira badge-x badge baggage-claim balloon ban banana bandage bangladeshi-taka banknote-arrow-down banknote-arrow-up banknote-check banknote-x banknote barcode barrel baseline bath battery-charging battery-full battery-low battery-medium battery-plus battery-warning battery beaker bean-off bean bed-double bed-single bed beef-off beef beer-off beer belarusian-ruble bell-check bell-dot bell-electric bell-minus bell-off bell-plus bell-ring bell between-horizontal-end between-horizontal-start between-vertical-end between-vertical-start biceps-flexed bike binary binoculars biohazard bird birdhouse bitcoin blend blender blinds blocks bluetooth-connected bluetooth-off bluetooth-searching bluetooth bold bolt bomb bone-fracture bone book-a book-alert book-audio book-bookmark book-check book-copy book-dashed book-down book-headphones book-heart book-image book-key book-lock book-minus book-open-check book-open-text book-open book-plus book-search book-text book-type book-up-2 book-up book-user book-x book bookmark-check bookmark-minus bookmark-off bookmark-plus bookmark-x bookmark boom-box bot-message-square bot-off bot bottle-wine bow-arrow box boxes braces brackets brain-circuit brain-cog brain-off brain brick-wall-fire brick-wall-shield brick-wall bridge briefcase-business briefcase-conveyor-belt briefcase-medical briefcase-plus briefcase bring-to-front broccoli broom-sparkles broom brush-cleaning brush bubbles bug-off bug-play bug building-complex-plus building-complex building bus-front bus cable-car cable cake-slice cake calculator calendar-1 calendar-arrow-down calendar-arrow-up calendar-check-2 calendar-check calendar-chevrons-left calendar-chevrons-right calendar-clock calendar-cog calendar-days calendar-fold calendar-heart calendar-minus-2 calendar-minus calendar-off calendar-plus-2 calendar-plus calendar-range calendar-search calendar-sync calendar-x-2 calendar-x calendar calendars camera-off camera can-soda can candy-cane candy-off candy cannabis-off cannabis captions-off captions car-battery car-front car-taxi-front car caravan card-sim carrot carton-off carton case-lower case-sensitive case-upper cassette-tape cast castle cat cctv-off cctv certificate chart-area chart-bar-big chart-bar-decreasing chart-bar-increasing chart-bar-stacked chart-bar chart-candlestick chart-column-big chart-column-decreasing chart-column-increasing chart-column-stacked chart-column chart-gantt chart-line chart-network chart-no-axes-column-decreasing chart-no-axes-column-increasing chart-no-axes-column chart-no-axes-combined chart-no-axes-gantt chart-pie chart-scatter chart-spline check-check check-line check chef-hat cherry chess-bishop chess-king chess-knight chess-pawn chess-queen chess-rook chevron-down chevron-first chevron-last chevron-left chevron-right chevron-up chevrons-down-up chevrons-down chevrons-left-right-ellipsis chevrons-left-right chevrons-left chevrons-right-left chevrons-right chevrons-up-down chevrons-up church cigarette-off cigarette circle-alert circle-arrow-down circle-arrow-left circle-arrow-out-down-left circle-arrow-out-down-right circle-arrow-out-up-left circle-arrow-out-up-right circle-arrow-right circle-arrow-up circle-check-big circle-check circle-chevron-down circle-chevron-left circle-chevron-right circle-chevron-up circle-chevrons-down circle-chevrons-left circle-chevrons-right circle-chevrons-up circle-dashed-check circle-dashed circle-divide circle-dollar-sign circle-dot-dashed circle-dot circle-ellipsis circle-equal circle-euro circle-fading-arrow-up circle-fading-play circle-fading-plus circle-gauge circle-minus circle-off circle-parking-off circle-parking circle-pause circle-percent circle-pile circle-play circle-plus circle-pound-sterling circle-power circle-question-mark circle-slash-2 circle-slash circle-small circle-star circle-stop circle-user-round circle-user circle-x circle circuit-board citrus clapperboard clef-alto clef-bass clef-treble clipboard-check clipboard-clock clipboard-copy clipboard-list clipboard-minus clipboard-paste clipboard-pen-line clipboard-pen clipboard-plus clipboard-type clipboard-x clipboard clock-1 clock-10 clock-11 clock-12 clock-2 clock-3 clock-4 clock-5 clock-6 clock-7 clock-8 clock-9 clock-alert clock-arrow-down clock-arrow-left clock-arrow-right clock-arrow-up clock-check clock-fading clock-plus clock closed-caption cloud-alert cloud-backup cloud-check cloud-cog cloud-download cloud-drizzle cloud-fog cloud-hail cloud-lightning cloud-moon-rain cloud-moon cloud-off cloud-rain-wind cloud-rain cloud-snow cloud-sun-rain cloud-sun cloud-sync cloud-upload cloud cloudy clover club code-xml code coffee cog coins columns-2 columns-3-cog columns-3 columns-4 combine command compass component computer concierge-bell cone construction contact-round contact container contrast cookie cooking-pot copy-check copy-minus copy-plus copy-slash copy-x copy copyleft copyright corner-down-left corner-down-right corner-left-down corner-left-up corner-right-down corner-right-up corner-up-left corner-up-right cpu-ai cpu creative-commons credit-card-check credit-card-minus credit-card-plus credit-card-reader credit-card-x credit-card croissant crop cross crosshair crown cuboid cup-soda cupcake currency cylinder dam database-arrow-down database-arrow-up database-backup database-check database-minus database-plus database-search database-x database-zap database decimals-arrow-left decimals-arrow-right delete dessert diameter diamond-minus diamond-percent diamond-plus diamond dice-1 dice-2 dice-3 dice-4 dice-5 dice-6 dices diff disc-2 disc-3 disc-album disc divide dna-off dna dock dog dollar-sign dome donut door-closed-cog door-closed-locked door-closed-package door-closed door-open door-stairwell dot download drafting-compass drama drill drone droplet-off droplet droplets drum drumstick dumbbell ear-off ear earth-lock earth eclipse egg-fried egg-off egg eighth-note eighth-notes eject ellipse ellipsis-vertical ellipsis engine equal-approximately-not equal-approximately equal-not equal eraser ethernet-port euro ev-charger expand external-link eye-closed eye-dashed eye-off eye face-angry face-expressionless face-grinning face-neutral face-slightly-frowning face-slightly-smiling-plus face-slightly-smiling factory fan fast-forward faucet feather fence ferris-wheel file-archive file-axis-3d file-badge file-box file-braces-corner file-braces file-chart-column-increasing file-chart-column file-chart-line file-chart-pie file-check-corner file-check file-clock file-code-corner file-code file-cog file-diff file-digit file-down file-exclamation-point file-headphone file-heart file-image file-input file-key file-lock file-minus-corner file-minus file-music file-output file-pen-line file-pen file-play file-plus-corner file-plus file-question-mark file-scan file-search-corner file-search file-signal file-sliders file-spreadsheet file-stack file-symlink file-terminal file-text file-type-corner file-type file-up file-user file-video-camera file-volume file-x-corner file-x file files film fingerprint-pattern fire-extinguisher fish-off fish-symbol fish fishing-hook fishing-rod flag-off flag-triangle-left flag-triangle-right flag flame-kindling flame flashlight-off flashlight flask-conical-off flask-conical flask-round flower-2 flower focus fold-horizontal fold-vertical folder-archive folder-bookmark folder-check folder-clock folder-closed folder-code folder-cog folder-dot folder-down folder-git-2 folder-git folder-heart folder-input folder-kanban folder-key folder-lock folder-minus folder-open-dot folder-open folder-output folder-pen folder-plus folder-root folder-search-2 folder-search folder-symlink folder-sync folder-tree folder-up folder-user folder-users folder-x folder folders footprints forklift form forward frame fuel fullscreen funnel-plus funnel-x funnel galaxy gallery-horizontal-end gallery-horizontal gallery-thumbnails gallery-vertical-end gallery-vertical gamepad-2 gamepad-directional gamepad gap-horizontal gap-vertical gauge gavel gem georgian-lari germ-off germ ghost gift git-branch-minus git-branch-plus git-branch git-commit-horizontal git-commit-vertical git-compare-arrows git-compare git-fork git-graph git-merge-conflict git-merge git-pull-request-arrow git-pull-request-closed git-pull-request-create-arrow git-pull-request-create git-pull-request-draft git-pull-request glass-water glasses globe-check globe-code globe-lock globe-off globe-x globe goal gpu graduation-cap grape graph-hub graph-star grid-2x2-check grid-2x2-plus grid-2x2-x grid-2x2 grid-3x2 grid-3x3 grip-horizontal grip-vertical grip groceries group guitar-electric guitar half-note ham hamburger hammer hand-coins hand-fist hand-grab hand-heart hand-helping hand-metal hand-platter hand handbag handle-bottom-right handshake hard-drive-download hard-drive-upload hard-drive hard-hat hash hat-glasses haze hd hdmi-port heading-1 heading-2 heading-3 heading-4 heading-5 heading-6 heading headphone-off headphones headset heart-crack heart-handshake heart-minus heart-off heart-plus heart-pulse heart-x heart heater helicopter hexagon highlighter hiking-stick hop-off hop hospital hotel hourglass-cog hourglass house-cog house-heart house-plug house-plus house-wifi house houses ice-cream-bowl ice-cream-cone id-card-lanyard id-card image-down image-minus image-off image-play image-plus image-up image-upscale image images import inbox indian-rupee infinity info inspection-panel italic iteration-ccw iteration-cw iv-bag japanese-yen joystick kanban kayak kazakh-tenge key-round key-square key keyboard-music keyboard-off keyboard lambda lamp-ceiling lamp-desk lamp-floor lamp-wall-down lamp-wall-up lamp land-plot landmark languages laptop-minimal-check laptop-minimal laptop lasso-select lasso layer-arrow-down layer-arrow-up layers-2 layers-arrow-down layers-arrow-up layers-minus layers-plus layers layout-arrow-down layout-arrow-right layout-dashboard layout-freeform layout-grid-circles layout-grid layout-list layout-panel-left layout-panel-top layout-template leaf leafy-green lectern lens-concave lens-convex lens letter-spacing letters library-big library life-buoy ligature lightbulb-off lightbulb lighthouse line-dot-bottom-vertical line-dot-left-horizontal line-dot-right-horizontal line-dot-top-vertical line-height line-squiggle line-style link-2-off link-2 link list-check list-checks list-chevrons-down-up list-chevrons-up-down list-clock list-collapse list-end list-filter-plus list-filter list-indent-decrease list-indent-increase list-minus list-music list-ordered list-plus list-restart list-sort-ascending list-sort-descending list-start list-todo list-tree list-video list-x list loader-circle loader-pinwheel loader locate-fixed locate-off locate lock-keyhole-open lock-keyhole lock-open lock log-in log-out logs lollipop luggage magnet mail-badge mail-check mail-clock mail-dot mail-minus mail-open mail-pen mail-plus mail-question-mark mail-search mail-warning mail-x mail mailbox mails map-minus map-pin-check-inside map-pin-check map-pin-house map-pin-minus-inside map-pin-minus map-pin-off map-pin-pen map-pin-plus-inside map-pin-plus map-pin-search map-pin-x-inside map-pin-x map-pin map-pinned map-plus map mars-stroke mars martini maximize-2 maximize medal megaphone-off megaphone memory-stick menu merge message-circle-check message-circle-code message-circle-dashed-check message-circle-dashed message-circle-heart message-circle-more message-circle-off message-circle-plus message-circle-question-mark message-circle-reply message-circle-text message-circle-warning message-circle-x message-circle message-square-check message-square-code message-square-dashed message-square-diff message-square-dot message-square-heart message-square-lock message-square-more message-square-off message-square-plus message-square-quote message-square-reply message-square-share message-square-text message-square-warning message-square-x message-square messages-circle messages-square metronome mic-audio-lines mic-off mic-signal mic-vocal mic microchip microscope microwave midi-port milestone milk-off milk minimize-2 minimize minus mirror-rectangular mirror-round monitor-check monitor-cloud monitor-cog monitor-dot monitor-down monitor-off monitor-pause monitor-pc monitor-play monitor-smartphone monitor-speaker monitor-stop monitor-up monitor-x monitor moon-star moon mop-sparkles mop mosque motorbike mountain-snow mountain mouse-left mouse-off mouse-pointer-2-off mouse-pointer-2 mouse-pointer-ban mouse-pointer-click mouse-pointer mouse-right mouse mouth-off mouth move-3d move-diagonal-2 move-diagonal move-down-left move-down-right move-down move-horizontal move-left move-right move-up-left move-up-right move-up move-vertical move navigation-2-off navigation-2 navigation-off navigation nepali-rupee network newspaper nfc non-binary notebook-dot notebook-pen notebook-tabs notebook-text notebook notepad-text-dashed notepad-text nut-off nut octagon-alert octagon-minus octagon-pause octagon-x octagon omega option orbit origami package-2 package-check package-minus package-open package-plus package-search package-x package paint-bucket paint-roller paintbrush-vertical paintbrush palette panda panel-bottom-close panel-bottom-dashed panel-bottom-open panel-bottom panel-left-close panel-left-dashed panel-left-open panel-left-right-dashed panel-left panel-right-close panel-right-dashed panel-right-open panel-right panel-top-bottom-dashed panel-top-close panel-top-dashed panel-top-open panel-top panels-left-bottom panels-right-bottom panels-top-left paper-bag paperclip parasol parentheses park parking-meter party-popper pause paw-print pc-case pen-line pen-off pen-tool pen pencil-line pencil-off pencil-ruler pencil-sparkles pencil pentagon percent perfume-bottle person-standing phi philippine-peso phone-call phone-forwarded phone-incoming phone-log phone-missed phone-off phone-outgoing phone pi piano pickaxe picture-in-picture-2 picture-in-picture piggy-bank pilcrow-left pilcrow-right pilcrow pill-bottle pill pin-off pin pipette pizza plane-landing plane-takeoff plane plant-pot play-off play playing-card playing-cards-fan playing-cards plug-2 plug-zap plug plus pocket-knife podium pointer-off pointer popcorn popsicle pound-sterling power-off power presentation printer-3d printer-check printer-x printer projector proportions puzzle pyramid qr-code quote rabbit radar radiation radical radio-off radio-receiver radio-tower radio radius rainbow rat ratio receipt-cent receipt-euro receipt-indian-rupee receipt-japanese-yen receipt-pound-sterling receipt-russian-ruble receipt-swiss-franc receipt-text receipt-turkish-lira receipt rectangle-circle rectangle-ellipsis rectangle-goggles rectangle-horizontal rectangle-vertical recycle redo-2 redo-dot redo refresh-ccw-dot refresh-ccw refresh-cw-off refresh-cw refrigerator regex remove-formatting repeat-1 repeat-2 repeat-off repeat replace-all replace reply-all reply rewind ribbon road robot-arm robot-vacuum rocket rocking-chair roller-coaster rose rotate-3d rotate-ccw-clock rotate-ccw-key rotate-ccw-square rotate-ccw rotate-cw-clock rotate-cw-fading-clock rotate-cw-square rotate-cw route-off route router rows-2 rows-3 rows-4 rss rugby-ball ruler-dimension-line ruler russian-ruble sailboat salad sandwich satellite-dish satellite saudi-riyal save-all save-check save-off save-pen save-plus save scale-3d scale scaling scan-barcode scan-box scan-eye scan-face scan-heart scan-line scan-qr-code scan-search scan-square scan-text scan school scissors-line-dashed scissors scooter scratch-blocks screen-share-off screen-share screw scroll-text scroll search-alert search-check search-code search-slash search-x search section send-horizontal send-to-back send separator-horizontal separator-vertical server-cog server-crash server-nas server-off server-plus server settings-2 settings shapes share-2 share sheet shell shelving-unit shield-alert shield-ban shield-check shield-cog-corner shield-cog shield-ellipsis shield-half shield-house shield-keyhole shield-lock shield-minus shield-off shield-plus shield-question-mark shield-user shield-x shield ship-cargo ship-wheel ship shirt shopping-bag shopping-basket shopping-cart-minus shopping-cart-plus shopping-cart shovel shower-head shredder shrimp-off shrimp shrink shrub shuffle sigma signal-high signal-low signal-medium signal-zero signal signature signpost-big signpost siren sixteenth-notes skip-back skip-forward skull slash slice sliders-horizontal sliders-vertical smartphone-charging smartphone-nfc smartphone-user-round smartphone snail snowflake soap-dispenser-droplet sofa solar-panel soup space spade sparkle sparkles speaker speech spell-check-2 spell-check spline-pointer spline split spool sport-shoe spotlight spray-can sprout square-activity square-arrow-down-left square-arrow-down-right square-arrow-down square-arrow-left square-arrow-out-down-left square-arrow-out-down-right square-arrow-out-up-left square-arrow-out-up-right square-arrow-right-enter square-arrow-right-exit square-arrow-right square-arrow-up-left square-arrow-up-right square-arrow-up square-asterisk square-bookmark square-bottom-dashed-scissors square-centerline-dashed-horizontal square-centerline-dashed-vertical square-chart-gantt square-check-big square-check square-chevron-down square-chevron-left square-chevron-right square-chevron-up square-code square-dashed-bottom-code square-dashed-bottom square-dashed-kanban square-dashed-mouse-pointer square-dashed-plus square-dashed-text square-dashed-top-solid square-dashed-x-corner square-dashed-x square-dashed square-dimensions square-divide square-dot square-equal square-exclamation-point square-function square-kanban square-library square-m square-menu square-minus square-mouse-pointer square-off square-parking-off square-parking square-pause square-pen square-percent square-pi square-pilcrow square-play square-plus square-power square-radical square-round-corner square-scissors square-sigma square-slash square-sparkles square-split-horizontal square-split-vertical square-square square-stack square-star square-stop square-terminal square-text square-user-round square-user square-x square squares-exclude squares-intersect squares-subtract squares-unite squircle-dashed squircle squirrel stamp star-check star-half star-minus star-off star-plus star-x star step-back step-forward stethoscope sticker sticky-note-check sticky-note-minus sticky-note-off sticky-note-plus sticky-note-x sticky-note sticky-notes stone store stretch-horizontal stretch-vertical strikethrough subscript summary sun-dim sun-medium sun-moon sun-snow sun sunrise sunset superscript swatch-book swiss-franc switch-camera sword swords syringe table-2 table-cells-merge table-cells-split table-columns-split table-of-contents table-properties table-rows-split table tablet-smartphone tablet tablets tag-plus tag-x tag tags tally-1 tally-2 tally-3 tally-4 tally-5 tangent target telescope tent-tree tent terminal test-tube-diagonal test-tube test-tubes text-align-center text-align-end text-align-justify-center text-align-justify-end text-align-justify-start text-align-justify text-align-start text-cursor-input text-cursor text-initial text-quote text-search text-wrap theater thermometer-snowflake thermometer-sun thermometer thumbs-down thumbs-up tic-tac-toe ticket-check ticket-minus ticket-percent ticket-plus ticket-slash ticket-x ticket tickets-plane tickets timeline timer-off timer-reset timer toggle-left toggle-right toilet tombstone tool-case toolbox toothbrush-sparkles toothbrush tornado torus touchpad-off touchpad towel-rack tower-control toy-brick tractor traffic-cone trailer train-front-tunnel train-front train-track tram-front transgender trash-off trash tree-deciduous tree-palm tree-pine trees trending-down trending-up-down trending-up triangle-alert triangle-dashed triangle-right triangle triangles-centerline-dashed-horizontal triangles-centerline-dashed-vertical trophy truck-electric truck tube-lotion turkish-lira turntable turtle tv-minimal-play tv-minimal tv type-outline type umbrella-off umbrella underline undo-2 undo-dot undo unfold-horizontal unfold-vertical ungroup university unlink-2 unlink unplug upload usb-c-port usb user-check user-cog user-group user-key user-lock user-minus user-pen user-plus user-round-arrow-left user-round-check user-round-cog user-round-group user-round-key user-round-minus user-round-pen user-round-plus user-round-search user-round-star user-round-x user-round user-search user-shield user-star user-x user users-collaboration users-round-collaboration users-round users utensils-crossed utensils utility-pole van variable vault vector-polygon vector-square vegan venetian-mask venus-and-mars venus vibrate-off vibrate video-off video videotape view virus-off virus voicemail volleyball volume-1 volume-2 volume-off volume-x volume vote wallet-cards wallet-minimal wallet wallpaper wand-sparkles wand warehouse washing-machine watch waves-arrow-down waves-arrow-up waves-horizontal waves-ladder waves-vertical waypoints webcam-off webcam webhook-off webhook weight-tilde weight wheat-off wheat whistle whole-word wifi-cog wifi-high wifi-lock wifi-low wifi-off wifi-pen wifi-sync wifi-zero wifi wind-arrow-down wind-arrow-up wind wine-off wine workflow worm wrench-off wrench x-line-top x zap-off zap zodiac-aquarius zodiac-aries zodiac-cancer zodiac-capricorn zodiac-gemini zodiac-leo zodiac-libra zodiac-ophiuchus zodiac-pisces zodiac-sagittarius zodiac-scorpio zodiac-taurus zodiac-virgo zoom-in zoom-out
"star"icon
modeMode · BehaviorIcon displays a Lucide graphic. Button enables click and keyboard activation without a caption.enumicon button"icon"mode
accessibleLabelAccessible label · AccessibilityName announced by assistive technology. Never displayed as a caption; falls back to the component name.string""accessibleLabel
strokeWidthStroke width · Appearancenumber2strokeWidth
currentRowBindingsCurrent row · DataBind writable visual values to fields of this repeated row.current-row-bindingsEditor: current-row-bindings[]currentRowBindings

API in code

MemberSignatureAccess
iconicon: LucideIconName;Read and write
modemode: WebIconMode;Read and write
accessibleLabelaccessibleLabel: string;Read and write
strokeWidthstrokeWidth: number;Read and write
onClickset onClick(handler: WebComponentEventHandler<this> | null);Read and write

click

method
click(): void;
Example
Icon1.click
Icon1.click();
Inherited members (27)
MemberSignatureAccess
currentRowBindingscurrentRowBindings: readonly WebCurrentRowBinding[];Read and write
elementreadonly element: TElement;Read-only
idreadonly id: string;Read-only
namereadonly name: string;Read-only
visiblevisible: boolean;Read and write
collapseWhenHiddencollapseWhenHidden: boolean;Read and write
enabledenabled: boolean;Read and write
xx: number;Read and write
yy: number;Read and write
widthwidth: number;Read and write
heightheight: number;Read and write
marginOuter spacing on all four sides, in pixels.margin: number;Read and write
marginTopmarginTop: number;Read and write
marginRightmarginRight: number;Read and write
marginBottommarginBottom: number;Read and write
marginLeftmarginLeft: number;Read and write
alignSelfalignSelf: RuntimeLayoutAlignSelf;Read and write
tabIndextabIndex: number;Read and write
backgroundColorbackgroundColor: string;Read and write
colorcolor: string;Read and write
borderColorborderColor: string;Read and write

focus

method
focus(options?: FocusOptions): void;

show

method
show(): void;

hide

method
hide(): void;

bindEvent

method
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit

method
emit(eventName: string, detail?: unknown): boolean;

dispose

method
dispose(): void;

Events

Link methods in Interaction. How to use events.

OnClick

Standard event (Event).

Signature and example
Interaction → OnClick
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Click(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnDblClick

Standard event (Event).

Signature and example
Interaction → OnDblClick
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1DblClick(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnFocus

Standard event (Event).

Signature and example
Interaction → OnFocus
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Focus(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnBlur

Standard event (Event).

Signature and example
Interaction → OnBlur
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Blur(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnKeyDown

Standard event (Event).

Signature and example
Interaction → OnKeyDown
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1KeyDown(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}

OnKeyUp

Standard event (Event).

Signature and example
Interaction → OnKeyUp
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1KeyUp(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}

OnMouseEnter

Standard event (Event).

Signature and example
Interaction → OnMouseEnter
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1MouseEnter(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnMouseLeave

Standard event (Event).

Signature and example
Interaction → OnMouseLeave
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1MouseLeave(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
WebRAD · Atentor · Read in Markdown
Source code: 6a562bda75a0 (with local changes) · November 7, 2026

Search documentation

Type to search APIs, components, and events.