Icons in JQuery Button widget

1 Sep 202124 minutes to read

The Essential Studio for JavaScript 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]

  • html
  • .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

    https://help.syncfusion.com/api/js/global#members:contenttype

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

  • javascript
  • $("#buttonId").ejButton({
            contentType: "imageonly",
            prefixIcon: "e-icon e-handup"
        });

    Execute the above code to render the following output.

    icons

    Icon library used in button component

    List of Icons

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

    List of icons

    e-unpin Icons_images2
    e-pin Icons_images3
    e-upload Icons_images4
    e-reload Icons_images5
    e-collapse Icons_images6
    e-cancel Icons_images7
    e-expand Icons_images8
    e-minimize Icons_images9
    e-login Icons_images10
    e-orientationlanscape Icons_images11
    e-alignleft Icons_images12
    e-aligncenter Icons_images13
    e-alignright Icons_images14
    e-alignjustify Icons_images15
    e-alignnone Icons_images16
    e-filterset Icons_images17
    e-filternone Icons_images18
    e-arrowheadup-2x Icons_images19
    e-arrowheaddown-2x Icons_images20
    e-arrowheadleft-2x Icons_images21
    e-arrowheadright-2x Icons_images22
    e-numbering Icons_images23
    e-bullets Icons_images24
    e-maximize Icons_images25
    e-delete Icons_images26
    e-scroll Icons_images27
    e-right-scroll Icons_images28
    e-search Icons_images29
    e-mediaback Icons_images30
    e-mediaforward Icons_images31
    e-medianext Icons_images32
    e-mediaprev Icons_images33
    e-mediaeject Icons_images34
    e-mediaclose Icons_images35
    e-mediapause Icons_images36
    e-mediaplay Icons_images37
    e-righttick Icons_images38
    e-smile Icons_images39
    e-information Icons_images40
    e-left-arrow Icons_images41
    e-right-arrow Icons_images42
    e-file-delete Icons_images43
    e-file-percentage-success Icons_images44
    e-file-cancel Icons_images45
    e-file-percentage-failed Icons_images46
    e-file-retry Icons_images47
    e-resize-handle Icons_images48
    e-down-arrow Icons_images49
    e-time Icons_images50
    e-up-arrow Icons_images51
    e-date Icons_images52
    e-datetime Icons_images53
    e-collapse-arrow Icons_images54
    e-expand-arrow Icons_images55
    e-restore Icons_images56
    e-plus Icons_images57
    e-minus Icons_images58
    e-handup Icons_images59
    e-clock Icons_images60
    e-cursor Icons_images61
    e-hyperlink Icons_images62
    e-hyperlinkbreak Icons_images63
    e-settings Icons_images64
    e-shoppingcart Icons_images65
    e-palette Icons_images66
    e-warningmessage Icons_images67
    e-cut Icons_images68
    e-copy Icons_images69
    e-paste Icons_images70
    e-edit Icons_images71
    e-swapleft Icons_images72
    e-swapright Icons_images73
    e-swapup Icons_images74
    e-swapdown Icons_images75
    e-zoomin Icons_images76
    e-zoomout Icons_images77
    e-star Icons_images78
    e-home Icons_images79
    e-clipboard Icons_images80
    e-userlogin Icons_images81
    e-dataexport Icons_images82
    e-arrowheadright Icons_images83
    e-arrowheaddown Icons_images84
    e-undo Icons_images85
    e-redo Icons_images86
    e-bold Icons_images87
    e-italic Icons_images88
    e-underline Icons_images89
    e-strikethrough Icons_images90
    e-font Icons_images91
    e-rarrowdown Icons_images92
    e-rarrowleft Icons_images93
    e-rarrowup Icons_images94
    e-rarrowright Icons_images95
    e-calender Icons_images96
    e-save Icons_images97