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. Image for the cookie policy date

Simple submit button with icon

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


3 Replies

BC Berly Christopher Syncfusion Team 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


MI Milos August 11, 2017 12:54 PM UTC

Hi Berly,

Thanks, that solved my problem. 

Regards,

Milos



BC Berly Christopher Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon