rendering issue of components in schedule component tool tip template

[Goutham]

Hi,

Please find video attachment for problem i have gone through,i am using schedule component and tooltip template to view event details.

it is taking time to load icons

Code in html file

  <ng-template #quickInfoTemplatesHeader let-data>

      <div>

        <div class="quick-info-header">

          <button *ngIf="data.elementType == 'event'" ejs-button cssClass="e-round event-quick-header-svg" (click)="onEditClick(data)">

            <img src="/assets/icons/new/pencil-line.svg" class="pencil-svg" />

          </button>

          <button *ngIf="data.elementType == 'event'" ejs-button cssClass="e-round event-quick-header-svg" (click)="onDeleteClick(data.Id)">

            <img src="/assets/icons/Global/Delete.svg" />

          </button>

          <button ejs-button cssClass="e-round event-quick-header-svg" (click)="onCloseClick($event)">

            <img src="/assets/icons/Global/Close.svg" />

          </button>

        </div>

      </div>

    </ng-template>

Attachment: Unpaper__Google_Chrome_20210209_170727_fcd26324.zip

[Balasubramanian Sattanathan]

Hi Goutham, 

Greetings from Syncfusion Support. 

We have validated your reported scenario at our end and could reproduce it when using the SVG icon as an image. Let you know that we can overcome the problem by making use of the below CSS. And also we would suggest you to refer the below UG to know more details about the Syncfusion icons. 

 

app.component.css: 

.edit_icon{ 

   height: 22px; 

   width: 22px; 

   background-image:  url(../assets/icons/edit_icon.svg); 

} 

.close_icon { 

   height: 22px; 

   width: 22px; 

   background-image:  url(../assets/icons/close_icon.svg); 

} 

.delete_icon { 

   height: 22px; 

   width: 22px; 

   background-image:  url(../assets/icons/delete_icon.svg); 

} 

app.component.html: 

<button *ngIf="data.elementType == 'event'" ejs-button class="edit_icon" (click)="onEditClick(data)"> 

</button> 

<button *ngIf="data.elementType == 'event'" ejs-button class="delete_icon" (click)="onDeleteClick(data.Id)"> 

</button> 

<button ejs-button class="close_icon" (click)="onCloseClick($event)"> 

</button> 

Sample: https://www.syncfusion.com/downloads/support/forum/162376/ze/quickInfoTemplates_SVG_icon-182687660.zip 

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

Kindly refer and try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S

[Goutham]

Hi,

Thank you for providing me a solution.

i have implemented with sync fusion icons.

But what if required icon is not there in icons list.How add or design new icons?or how external(other libraries) icons works like sync fusion icons.

[Balasubramanian Sattanathan]

Hi Goutham, 

Thanks for the details. 

We have analyzed your requirement at our end and regret to let you know that we can use third party icons like fontawesome using the below steps. And also we would suggest you to refer the below link to generate icon using Syncfusion Metro Studio. 

https://www.syncfusion.com/downloads/metrostudio  

index.html: 

<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

app.component.html: 

<button *ngIf="data.elementType == 'event'" ejs-button class="fa fa-edit fa-stack-4x" 

    (click)="onEditClick(data)"> 

</button> 

<button *ngIf="data.elementType == 'event'" ejs-button class="fa fa-trash fa-stack-4x" 

    (click)="onDeleteClick(data.Id)"> 

</button> 

<button ejs-button class="fa fa-window-close fa-stack-4x" (click)="onCloseClick($event)"> 

</button> 

 

Screenshot: 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162376/ze/Schedule_with_fontawesome_icon2096489096.zip 

Kindly refer to the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S