Icons Library
18 Apr 20228 minutes to read
The Syncfusion Essential JS 2 provides the set of base64 formatted font icons, that can be utilized in the ASP.NET Core application.
Steps to Use Icon
-
Add a class
e-iconsto the HTML element that shows the icon. This class contains the font-family and common property of the font icons. -
Add the icon class with corresponding icon content from the available icons. For example, the below code snippet represents the search icon class.
<style>
.e-search:before{
content:'\e993';
}
</style>3.Add e-icons and e-search class to the HTML element.
<span class="e-icons e-search"></span>The below code snippet represents the complete example of icon usage.
<style>
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-settings"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>Icons Size
You can change the icon size by adding e-small, e-medium and e-large class in the HTML element.
- When icon size set to Small, the font size will be
8px. - When icon size set to Medium, the font size will be
16px. - When icon size set to Large, the font size will be
24px.
<p>Smaller icons</p>
<span class="e-icons e-cut e-small"></span>
<span class="e-icons e-copy e-small"></span>
<span class="e-icons e-paste e-small"></span>
<span class="e-icons e-bold e-small"></span>
<span class="e-icons e-underline e-small"></span>
<span class="e-icons e-italic e-small"></span>
<p>Medium icons</p>
<span class="e-icons e-cut e-medium"></span>
<span class="e-icons e-copy e-medium"></span>
<span class="e-icons e-paste e-medium"></span>
<span class="e-icons e-bold e-medium"></span>
<span class="e-icons e-underline e-medium"></span>
<span class="e-icons e-italic e-medium"></span>
<p>Larger icons</p>
<span class="e-icons e-cut e-large"></span>
<span class="e-icons e-copy e-large"></span>
<span class="e-icons e-paste e-large"></span>
<span class="e-icons e-bold e-large"></span>
<span class="e-icons e-underline e-large"></span>
<span class="e-icons e-italic e-large"></span>
Tooltip for icons
title attribute is used to improve accessibility with screen readers and shows a tooltip on mouseover. The following example code displays tooltip text for appropriate icons.
<span class="e-icons e-upload-1" title="Upload"></span>
<span class="e-icons e-download" title="Download"></span>
<span class="e-icons e-undo" title="Undo"></span>
<span class="e-icons e-redo" title="Redo"></span>
<span class="e-icons e-align-top" title="AlignTop"></span>
<span class="e-icons e-align-bottom" title="AlignBottom"></span>
<span class="e-icons e-align-middle" title="AlignMiddle"></span>
Icon appearance customization
You can customize color and size by overriding the e-icons class. The following example code demonstrates the custom font-size and color for icons.
<span class="e-icons e-align-top"></span>
<span class="e-icons e-align-bottom"></span>
<span class="e-icons e-align-middle"></span>
<span class="e-icons e-justify"></span>
<span class="e-icons e-decrease-indent"></span>
<span class="e-icons e-increase-indent"></span>
<style>
.e-icons{
color: #ff0000;
font-size: 26px !important;
}
</style>
Third party icons integration
The Syncfusion ASP.NET core Toolbar control supports to render custom font icons using the prefixIcon property. To render custom font icons define the required font CSS that provides the required font name, font size, and content for the icon.
The following code explains how to render open-iconic icons using prefixIcon property.
<ejs-toolbar id="defaultToolbar">
<e-toolbar-items>
<e-toolbar-item prefixIcon="oi oi-list-rich"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-account-login"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-account-logout"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-action-redo"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-action-undo"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-clock"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-audio"></e-toolbar-item>
<e-toolbar-item prefixIcon="oi oi-bluetooth"></e-toolbar-item>
</e-toolbar-items>
</ejs-toolbar>
HTML attribute support
You can add the additional HTML attributes to the Syncfusion ASP.NET Core Button using HtmlAttributes property. All syncfusion ASP.NET Core controls support HTML attribute.
The following example shows the font size customization using HtmlAttributes directive.
@{IDictionary<string, object> customAttribute = new Dictionary<string, object>()
{
{ "style", "font-size: 20px" }
};
}
<ejs-button id="button" iconCss="e-icons e-copy" HtmlAttributes="customAttribute"></ejs-button>Using icons directly in HTML element
The built-in Syncfusion icons can be rendered directly in the HTML element by defining e-icons class that contains the font-family and common property of font icons, and defining the available icon’s class with e- prefix.
The following code example explains the direct rendering of Syncfusion download icon in the span element.
<span class="e-icons e-download"></span>Icons list
The complete pack of Syncfusion ASP.NET Core icons is listed in the following table. The corresponding icon content can be referred to the content section.