Icons in EJ 1 ASP.NET MVC Button

26 Oct 2016 / 1 minute 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.

    Icons_img1

    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