Icon not showing up

[Scott Price]

Hello,

I copied the code from this example: (https://ej2.syncfusion.com/angular/documentation/listview/how-to/add-and-remove-list-items-from-listview/) and can't get the delete X icon to show up. I'm pretty sure I've added all the necessary css files to styles.css and icons from all the other controls I use show up. That example unfortunately doesn't provide any CSS files so I can't be 100% certain.

Thanks

[Shalini Maragathavel]

Hi Scott, 

Greetings from Syncfusion support. 

                                                                                                                                         

We checked your query and suspect that you have not applied the CSS to the proper class, which is the cause of the issue. To overcome the reported issue, we suggest you to set the content property to the proper class as demonstrated in the below code snippet,  

app.component.html 

<ejs-listview [dataSource]="data" [fields]="fields"> 

    <ng-template #template let-data=""> 

      <div class="text-content"> 

        {{ data.text }} <span class="delete-icon e-icons"></span> 

      </div> 

    </ng-template> 

  </ejs-listview> 

--------------------------------------------------- 

app.component.css 

.delete-icon::before { 

  content: '\e700'; 

  float: right; 

  cursor: pointer; 

} 

Please find the below sample for your reference, 

Sample: https://stackblitz.com/edit/angular-reaeu6?file=app.component.css

Note: Please ensure whether you have added e-icons to the delete icon. 

Please check the below link for details on our icons library for various icons.

Icons: https://ej2.syncfusion.com/angular/documentation/appearance/icons/

If your reported problem persists, then please share the following information to validate further.  

• If possible, replicate your reported problem in the above sample or provide a simple sample to replicate the issue.
• Share your complete ListView rendering code.

This information would help us to find the exact cause of reported problem and to provide you the prompt solution.  

Regards,   

Shalini M. 

[Rajaraman Soundararajan]

Hi Shalini, 

I am facing the same problem in Community Edition 

index.html 

  <link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

app.component.css

 .delete-icon::before {

    content: '\e700';

    float: right;

   cursor:pointer

}

app.component.ts

            <ejs-listview

              #list

              id="sample-list"

              [dataSource]="data"

              [fields]="fields"

              (actionComplete)="onComplete()"

            >

              <ng-template #template let-data="">

                <div class="text-content">

                  {{ data.text }} <span class="delete-icon e-icons"></span>

                </div>

              </ng-template>

            </ejs-listview>

          </div>

  }

[LeoLavanya Dhanaraj]

Hi Scott,

From your shared details, we understand that you are facing an issue while rending Angular ListView component. We suspect that the issue occurs due to the usage of rel='nofollow' in our stylesheet reference link. This will ignore the style reference.

To render any Syncfusion component, you need to add a proper style reference at your end. For your reference, we have attached the sample.

Sample : https://stackblitz.com/edit/angular-reaeu6-dgs8kz?file=index.html

Documentation: https://ej2.syncfusion.com/angular/documentation/appearance/overview/#cdn-direct-referral

Reference taken from the below blob.

https://stackoverflow.com/questions/2509006/what-does-rel-nofollow-me-do#:~:text=Rel%3D%22nofollow%20me%22%20Means,social%20repo%20to%20that%20page.

Is there any specific reason to use nofollow at your end? Please revert back to us with the details if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj