1. Home
  2. Forum
  3. Angular - EJ 2
  4. Not able to render the male icon properly on screen.

Not able to render the male icon properly on screen.

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.

HTML  file 

 <e-column field='attendeeName' headerText='Attendee Name' isPrimaryKey = true [allowEditing] = 'false'>
                <ng-template #template let-data>
                  <div>
                    <div class="empimg">
                      <span class="e-userimg sf-icon-Male">
                      </span>
                    </div>
                    <span id="Emptext">{{data.attendeeName}}</span>
                  </div>
                </ng-template>
              </e-column>


css file

.empimg{
  height: 27px;
  width: 29px;
  border-radius: 14px;
  background-color:#e3165b;
  }
  :host-context(.bootstrap)  /deep/ .empimg{
    background-color:#0078d6;
  }
  :host-context(.bootstrap4)  /deep/ .empimg{
    background-color:#0078d6;
  }
  :host-context(.fabric) /deep/ .empimg {
    background-color:#0078d6;
  }
  :host-context(.material) /deep/  .empimg{
    background-color:#e3165b !important;
  }
  :host-context(.highcontrast) /deep/ .empimg{
    background-color:#ffd939;
  }
  _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-Male::before{
    color: black;
  }
  #Emptext{
    top: -12px;
    left: 41px;
    position: relative;
    }
    #grid.e-rtl #Emptext{
      top: -12px;
      left: -41px;
      position: relative;
    }
:host-context(.highcontrast) /deep/ .e-userimg.sf-icon-Male::before{
  color: black;
}
.e-userimg.sf-icon-Male::before{
font-size: 13px;
}
.e-userimg.sf-icon-Male{
  margin: 0px 8px;
  line-height: 26px;
  color: white;
  font-size: 13px;
  }
.e-userimg.sf-icon-Male::before{
    content: '\e700';
}

1 Reply 1 reply marked as answer
VS Vignesh Sivagnanam Syncfusion Team February 26, 2021 10:45 AM UTC

Hi Prakash 

Based on your query you want to render the gender icon in the grid column template. We have prepared a sample and in this sample we render the gender icon in the grid.  

Please refer the below sample and code example for your reference, 


Code example : 
Index.html 
<head> 
    <meta charset="utf-8" /> 
    <title>Window</title> 
    <link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> 
    <link 
      rel="stylesheet" 
    /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="icon" type="image/x-icon" rel='nofollow' href="favicon.ico" /> 
  </head> 

………………………………………. 

App.component.html 
<e-column field="CustomerName" headerText="Customer Name" width="150"> 
        <ng-template #template let-data> 
          <div> 
            <div class="empimg"> 
              <span class="fa fa-male"> </span> 
            </div> 
            <span id="Emptext">{{data.CustomerName}}</span> 
          </div> 
        </ng-template> 
      </e-column> 

Regards 
Vignesh Sivagnanam 


Marked as answer
Loader.
Up arrow icon