Icons in ASP.NET MVC Button

12 Jan 20223 minutes to read

The Essential Studio for ASP.NET MVC provide icons library that contains the number of in-built 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.

Refer to the following link to know what are the values passed in the “ContentType” property

http://help.syncfusion.com/aspnetmvc/button/icons

Also in the button sample, you can use the icon class names as follows,

  • CSHTML
  • @Html.EJ().Button("button").Size(ButtonSize.Small).ContentType(ContentType.ImageOnly).PrefixIcon("e-icon e-handup")
    
    
    
    @Html.EJ().SplitButton("splitbutton").ContentType(ContentType.ImageOnly).PrefixIcon("e-icon e-calender")
    
    
    
    @Html.EJ().ToggleButton("toggleButton").Size(ButtonSize.Small).ContentType(ContentType.ImageOnly).DefaultPrefixIcon("e-icon e-mediaplay").ActivePrefixIcon("e-icon e-mediapause")

    Execute the above code to render the following output.

    ASPNETMVC Button Icons

    List of Icons

    The complete list of icons is listed in the following table.

    List of icons

    e-unpin

    ASPNETMVC Button unpinIcons

    e-pin

    ASPNETMVC Button pin Icons

    e-upload

    ASPNETMVC Button upload Icons

    e-reload

    ASPNETMVC Button reload Icons

    e-collapse

    ASPNETMVC Button collapse Icons

    e-cancel

    ASPNETMVC Button cancel Icons

    e-expand

    ASPNETMVC Button expand Icons

    e-minimize

    ASPNETMVC Button minimize Icons

    e-login

    ASPNETMVC Button login Icons

    e-orientationlanscape

    ASPNETMVC Button orientationlanscape Icons

    e-alignleft

    ASPNETMVC Button alignleft Icons

    e-aligncenter

    ASPNETMVC Button aligncenter Icons

    e-alignright

    ASPNETMVC Button alignright Icons

    e-alignjustify

    ASPNETMVC Button alignjustify Icons

    e-alignnone

    ASPNETMVC Button alignnone Icons

    e-filterset

    ASPNETMVC Button filterset Icons

    e-filternone

    ASPNETMVC Button filternone Icons

    e-arrowheadup-2x

    ASPNETMVC Button arrowheadup Icons

    e-arrowheaddown-2x

    ASPNETMVC Button arrowheaddown Icons

    e-arrowheadleft-2x

    ASPNETMVC Button arrowheadleft Icons

    e-arrowheadright-2x

    ASPNETMVC Button arrowheadright Icons

    e-numbering

    ASPNETMVC Button numbering Icons

    e-bullets

    ASPNETMVC Button bullets Icons

    e-maximize

    ASPNETMVC Button maximize Icons

    e-delete

    ASPNETMVC Button delete Icons

    e-scroll

    ASPNETMVC Button scroll Icons

    e-right-scroll

    ASPNETMVC Button right Icons

    e-search

    ASPNETMVC Button search Icons

    e-mediaback

    ASPNETMVC Button mediaback Icons

    e-mediaforward

    ASPNETMVC Button mediaforward Icons

    e-medianext

    ASPNETMVC Button medianext Icons

    e-mediaprev

    ASPNETMVC Button mediaprev Icons

    e-mediaeject

    ASPNETMVC Button mediaeject Icons

    e-mediaclose

    ASPNETMVC Button mediaclose Icons

    e-mediapause

    ASPNETMVC Button mediapause Icons

    e-mediaplay

    ASPNETMVC Button mediaplay Icons

    e-righttick

    ASPNETMVC Button righttick Icons

    e-smile

    ASPNETMVC Button smile Icons

    e-information

    ASPNETMVC Button information Icons

    e-left-arrow

    ASPNETMVC Button left Icons

    e-right-arrow

    ASPNETMVC Button right Icons

    e-file-delete

    ASPNETMVC Button delete Icons

    e-file-percentage-success

    ASPNETMVC Button percentage Icons

    e-file-cancel

    ASPNETMVC Button file cancel Icons

    e-file-percentage-failed

    ASPNETMVC Button file percentage Icons

    e-file-retry

    ASPNETMVC Button file retry Icons

    e-resize-handle

    ASPNETMVC Button resize Icons

    e-down-arrow

    ASPNETMVC Button down arrow Icons

    e-time

    ASPNETMVC Button time Icons

    e-up-arrow

    ASPNETMVC Button up arrow Icons

    e-date

    ASPNETMVC Button date Icons

    e-datetime

    ASPNETMVC Button datetime Icons

    e-collapse-arrow

    ASPNETMVC Button collapse Icons

    e-expand-arrow

    ASPNETMVC Button expand Icons

    e-restore

    ASPNETMVC Button restore Icons

    e-plus

    ASPNETMVC Button plus Icons

    e-minus

    ASPNETMVC Button minus Icons

    e-handup

    ASPNETMVC Button handup Icons

    e-clock

    ASPNETMVC Button clock Icons

    e-cursor

    ASPNETMVC Button cursor Icons

    e-hyperlink

    ASPNETMVC Button hyperlink Icons

    e-hyperlinkbreak

    ASPNETMVC Button hyperlinkbreak Icons

    e-settings

    ASPNETMVC Button settings Icons

    e-shoppingcart

    ASPNETMVC Button shoppingcart Icons

    e-palette

    ASPNETMVC Button palette Icons

    e-warningmessage

    ASPNETMVC Button warningmessage Icons

    e-cut

    ASPNETMVC Button cut Icons

    e-copy

    ASPNETMVC Button copy Icons

    e-paste

    ASPNETMVC Button paste Icons

    e-edit

    ASPNETMVC Button edit Icons

    e-swapleft

    ASPNETMVC Button swapleft Icons

    e-swapright

    ASPNETMVC Button swapright Icons

    e-swapup

    ASPNETMVC Button swapup Icons

    e-swapdown

    ASPNETMVC Button swapdown Icons

    e-zoomin

    ASPNETMVC Button zoomin Icons

    e-zoomout

    ASPNETMVC Button zoomout Icons

    e-star

    ASPNETMVC Button star Icons

    e-home

    ASPNETMVC Button home Icons

    e-clipboard

    ASPNETMVC Button clipboard Icons

    e-userlogin

    ASPNETMVC Button userlogin Icons

    e-dataexport

    ASPNETMVC Button dataexport Icons

    e-arrowheadright

    ASPNETMVC Button arrowheadright Icons

    e-arrowheaddown

    ASPNETMVC Button arrowheaddown Icons

    e-undo

    ASPNETMVC Button undo Icons

    e-redo

    ASPNETMVC Button redo Icons

    e-bold

    ASPNETMVC Button bold Icons

    e-italic

    ASPNETMVC Button italic Icons

    e-underline

    ASPNETMVC Button underline Icons

    e-strikethrough

    ASPNETMVC Button strikethrough Icons

    e-font

    ASPNETMVC Button font Icons

    e-rarrowdown

    ASPNETMVC Button arrowdown Icons

    e-rarrowleft

    ASPNETMVC Button arrowleft Icons

    e-rarrowup

    ASPNETMVC Button arrowup Icons

    e-rarrowright

    ASPNETMVC Button erarrowright Icons

    e-calender

    ASPNETMVC Button calender Icons

    e-save

    ASPNETMVC Button save Icons