The Syncfusion Angular UI Components provides the set of base64 formatted font icons, that can be utilized in the web application.
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>The below code snippet represents the complete example of icon usage.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<style>
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
<h1>
Hello Angular, Syncfusion Angular UI!
</h1>
<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>
`
})
export class AppComponent {
}The Essential JS 2 icon library can be customize icon color, size by overriding the e-icons class.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<style>
.e-icons{
color: #00ffff;
font-size: 26px;
}
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
<h1>
Hello Angular, Syncfusion Angular UI!
</h1>
<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>
`
})
export class AppComponent {
}The complete pack of Essential JS 2 icons are listed in the following table. The corresponding icon content can be referred in the content section.