- Adding icon in Button
- List of Icons
Contact Support
Icons in ASP.NET Core Button control
8 Jun 20212 minutes to read
The Essential Studio for ASP.NET Core provide icons library that contains the number of built-in icons that can be applied for CSS class names to elements and refer “ej.widgets.all.core.min.css” file. Use the following syntax to apply class names.
Syntax: .e-icon .e-[icon description]
.e-icon .e-search
Adding icon in Button
For example, you can render the desired icon in the button by using the following table that contains the listed icons’ CSS class names in the PrefixIcon
property of button component. Also, use ContentType
property to display the icon in the button. In the following code example, specify the ContentType
of the button as ImageOnly.
Also in the button sample, you can use the icon class names as follows,
/*ej-Tag Helper code to render Button*/
<ej-button id="button" size="Small" content-type="ImageOnly" prefix-icon="e-icon e-handup" show-rounded-corner="true" />
<ej-split-button id="splitButton" content-type="ImageOnly" width="90px" prefix-icon="e-icon e-calender" show-rounded-corner="true" />
<ej-toggle-button id="toggleButton" size="Small" content-type="ImageOnly" show-rounded-corner="true" default-prefix-icon="e-icon e-mediaplay" default-suffix-icon="e-icon e-mediapause"/>
/*Razor code to render Button*/
@{ Html.EJ().Button("button").Size(ButtonSize.Small).ContentType(ContentType.ImageOnly).ShowRoundedCorner(true).PrefixIcon("e-icon e-handup").Render(); }
@{ Html.EJ().SplitButton("splitButton").ContentType(ContentType.ImageOnly).Width("90px").ShowRoundedCorner(true).PrefixIcon("e-icon e-calender").Render(); }
@{ Html.EJ().ToggleButton("toggleButton").Size(ButtonSize.Small).ContentType(ContentType.ImageOnly).ShowRoundedCorner(true).DefaultPrefixIcon("e-icon e-mediaplay").DefaultSuffixIcon("e-icon e-mediapause").Render(); }
NOTE
To render the Button Control you can use either Razor or Tag helper code as given in the above code snippet.
Execute the above code to render the following output.
List of Icons
The complete list of icons is listed in the following table.
List of icons
e-unpin | |
e-pin | |
e-upload | |
e-reload | |
e-collapse | |
e-cancel | |
e-expand | |
e-minimize | |
e-login | |
e-orientationlanscape | |
e-alignleft | |
e-aligncenter | |
e-alignright | |
e-alignjustify | |
e-alignnone | |
e-filterset | |
e-filternone | |
e-arrowheadup-2x | |
e-arrowheaddown-2x | |
e-arrowheadleft-2x | |
e-arrowheadright-2x | |
e-numbering | |
e-bullets | |
e-maximize | |
e-delete | |
e-scroll | |
e-right-scroll | |
e-search | |
e-mediaback | |
e-mediaforward | |
e-medianext | |
e-mediaprev | |
e-mediaeject | |
e-mediaclose | |
e-mediapause | |
e-mediaplay | |
e-righttick | |
e-smile | |
e-information | |
e-left-arrow | |
e-right-arrow | |
e-file-delete | |
e-file-percentage-success | |
e-file-cancel | |
e-file-percentage-failed | |
e-file-retry | |
e-resize-handle | |
e-down-arrow | |
e-time | |
e-up-arrow | |
e-date | |
e-datetime | |
e-collapse-arrow | |
e-expand-arrow | |
e-restore | |
e-plus | |
e-minus | |
e-handup | |
e-clock | |
e-cursor | |
e-hyperlink | |
e-hyperlinkbreak | |
e-settings | |
e-shoppingcart | |
e-palette | |
e-warningmessage | |
e-cut | |
e-copy | |
e-paste | |
e-edit | |
e-swapleft | |
e-swapright | |
e-swapup | |
e-swapdown | |
e-zoomin | |
e-zoomout | |
e-star | |
e-home | |
e-clipboard | |
e-userlogin | |
e-dataexport | |
e-arrowheadright | |
e-arrowheaddown | |
e-undo | |
e-redo | |
e-bold | |
e-italic | |
e-underline | |
e-strikethrough | |
e-font | |
e-rarrowdown | |
e-rarrowleft | |
e-rarrowup | |
e-rarrowright | |
e-calender | |
e-save |