Articles in this section
Category / Section

How to use the FaviconCSS property in the Dialog control?

1 min read


The FaviconCSS property is used to provide custom icons for custom actions by using a CSS class. For that, you have to define the CSS class in the FaviconCSS as a string value and then apply styles to that class in the style section.



In order to add custom icon, you have to define a list and add custom to the list as shown in the following code example.


@{List<string> icon = new List<string>() { "close", "collapsible", "maximize", "minimize", "pin" ,"custom" }; }


Define and set a value to the FaviconCSS API in the Dialog builder in the view page as shown in the following code example.


    @{Html.EJ().Dialog("basicDialog").Title("Dialog").ContentTemplate(@<div style="margin: 5px 14px">
            Your content here...
    </div>).Width(550).Content(".control").ActionButtons(icon).FaviconCSS("custom-image-class").ClientSideEvents(evt => evt.Close("onDialogClose")).Render();}


After defining the class, apply styles to that CSS class in the style section as follows.


.custom-image-class {
       background-position: -25px 0;    


The sample with Favicon CSS API is available in the following location: Sample


When the attached sample is run, the following screenshot is the output.



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment