How to use the FaviconCSS property in the Dialog control?

Description

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.

Solution

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.

CSHTML

@{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.

CSHTML

    @{Html.EJ().Dialog("basicDialog").Title("Dialog").ContentTemplate(@<div style="margin: 5px 14px">
        <div>
            Your content here...
        </div>
    </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.

CSS

.custom-image-class {
        background-image:url("../../Images/flags.png");
       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.