Icons

21 Jun 20212 minutes to read

The Essential Studio 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.

  • css
  • 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/js/api/global

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

  • html
  • <ej:Button ID="buttonid" runat="server" Type="Button" ContentType="ImageOnly" PrefixIcon="e-icon e-handup">
    
    </ej:Button>
    
    <ej:SplitButton ID="SplitButton" runat="server" ContentType="ImageOnly" PrefixIcon="e-icon e-calender">
    
    </ej:SplitButton>
    
    <ej:ToggleButton ID="ToggleButton" runat="server" ContentType="ImageOnly" DefaultPrefixIcon="e-icon e-mediaplay"
    
    ActivePrefixIcon="e-icon e-mediapause">
    
    </ej:ToggleButton>

    Icons_images1

    List of Icons

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

    e-unpin

    Icons_images2

    e-pin

    Icons_images3

    e-upload

    Icons_images4

    e-reload

    Icons_images5

    e-collaps

    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_images84

    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