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

Simple submit button with icon

Thread ID:

Created:

Updated:

Platform:

Replies:

132037 Aug 9,2017 11:00 AM UTC Aug 14,2017 04:29 AM UTC Angular 3
loading
Tags: ejGroupButton
Milos
Asked On August 9, 2017 11:00 AM UTC

I have a problem to show simple button with icon.

I tried: 

1) <input type="button" [contentType]="'imageonly'" [prefixIcon]="'e-icon e-delete'" ej-button />

2) <input type="button" contentType="imageonly" [prefixIcon]="e-icon e-delete" ej-button />

3) <input type="button" contentType="imageonly" prefixIcon="e-icon e-delete" ej-button />


Without success. Where am I wrong? 


Regards,

Milos


Berly Christopher [Syncfusion]
Replied On August 10, 2017 02:40 PM UTC

Hi Milos, 
 
Thanks for contacting Syncfusion support. 
 
We have checked with your query. We have suggest to use <button></button> tag to create the button with prefixIcon and suffixIcon. Please refer the below code in your sample to achieve your requirement. 
 
app.component.html: 
 
 
<button type="button" [contentType]="imageonly" [prefixIcon]="deleteicon" ej-button ></button> 
 
<button type="button" contentType="imageonly" [prefixIcon]="deleteicon" ej-button ></button> 
 
<button type="button" contentType="imageonly" prefixIcon="e-icon e-delete" ej-button ></button> 
 
 
app.component.ts: 
 
 
import { Component, ViewEncapsulation} from '@angular/core'; 
 
    @Component({ 
    selector: 'ej-app', 
    templateUrl: './app.component.html', 
    }) 
    export class AppComponent { 
        imageonly:any; 
        deleteicon:any; 
        constructor() {  
            this.imageonly="imageonly"; 
            this.deleteicon="e-icon e-delete"; 
        } 
     } 
 
In the above code example, we have used <button></button> tag to create the button with Icon. Also, you can achieve the property binding to the control by using “[]” (“square bracket”)  in app.component.html  file and define the binding value in the app.component.ts file. 
 
To know more about binding of the Syncfusion component in Angular please refer the below UG documentation. 
 
 
For your convenience, we have prepared the sample based on your requirement. Please get the sample from the below location. 
 
  
To know more about how to create our component in Angular please refer the below demo link. We have showcased the demo for our component in the below link. 
 
 
If still you are facing issues please get back to us with more details that will help us to provide exact solution. 
 
Regards, 
Berly B.C

Milos
Replied On August 11, 2017 12:54 PM UTC

Hi Berly,

Thanks, that solved my problem. 

Regards,

Milos


Berly Christopher [Syncfusion]
Replied On August 14, 2017 04:29 AM UTC

Hi Milos, 
  
Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this. 
  
Regards, 
Berly B.C 


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.

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

;