The Syncfusion Blazor library provides the set of base64
formatted font icons which are being used in the Syncfusion Blazor components. These can be utilized in your web application also as needed.
e-icons
to the HTML element that shows the icon. This class contains the font-family and common property of the font icons..e-search:before{
content:'\e993';
}
e-icons
and e-search
class to the HTML element.<span class="e-icons e-search"></span>
<head>
element of the ~/wwwroot/index.html
in Blazor WebAssembly app or ~/Pages/_Host.cshtml
in Blazor server app.<head>
<link href="https://cdn.syncfusion.com/blazor/18.4.42/bootstrap4.css" rel="stylesheet" />
</head>
The below code snippet represents the complete example of icon usage in ~/Pages/Index.razor
.
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
<style>
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
The Syncfusion Blazor icon library can customize its color, size by overriding the e-icons
class.
<style>
.e-icons{
color: #00ffff;
font-size: 26px;
}
.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-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
The complete pack of Syncfusion Blazor icons is listed in the below table. The corresponding icon content can be referred to the content section.