We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Including icons in ej2 edition (like gender icon in grid overview example)

Thread ID:

Created:

Updated:

Platform:

Replies:

140651 Oct 30,2018 04:30 PM UTC Oct 31,2018 12:34 PM UTC Angular - EJ 2 1
loading
Tags: Grid
Marc Sommer
Asked On October 30, 2018 04:30 PM UTC

Hi,
I am referring to the following example: Overview Grid sample
I am trying to figure out to which icon collection this example is referring when trying to display an icon for the gender column and how to include the appropriate files. I noticed that even the running example at stackblitz doesn't display the gender icon properly. And the online example in the documentation doesn't provide the full source in order to find out which stylesheets get imported. Currently I am using the material stylesheets. I am missing an appropriate entry for including icons in the ej2 documentation like in the ej1 documentation.

<ng-template #template let-data> <div> <div class="empimg"> <span *ngIf="data.EmployeeImg === 'usermale'" class="e-userimg sf-icon-Male"> </span> <span *ngIf="data.EmployeeImg === 'userfemale'" class="e-userimg sf-icon-FeMale"> </span> </div> <span id="Emptext">{{data.Employees}}</span> </div> </ng-template>


@Component({ selector: 'ej-gridbatchedit', templateUrl: 'over-view.html', styleUrls: ['./overview.style.css'], providers: [FilterService,VirtualScrollService] })

.empimg{
height: 27px;
width: 29px;
border-radius: 14px;
background-color:#e3165b;
}
.e-userimg.sf-icon-Male::before,
.e-userimg.sf-icon-FeMale::before{
font-size: 13px;
}
.e-userimg.sf-icon-Male, .e-userimg.sf-icon-FeMale {
margin: 0px 8px;
line-height: 26px;
color: white;
font-size: 13px;
}
.e-userimg.sf-icon-Male::before{
content: '\e700'; <-- where is the content coming from ??
}
.e-userimg.sf-icon-FeMale::before{
content: '\e701';
}

Mohammed Farook J [Syncfusion]
Replied On October 31, 2018 12:34 PM UTC

Hi Marc, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. For the demo purpose we have used some custom font icons in only our online sample browser demo.   We are not included these packages in stabckblitz link. If You need to show the font icons like grid overview demo sample, You may also download and import these fonts collection in your application to have fonts as like in the overview sample. Please refer the fonts collection from the GitHub link below, 


Please get back to us if you need further assistance. 
 
J Mohammed Farook 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;