Icon SplitButton
You can enhance the textual content of the SplitButton by adding image, predefined, or custom icons to it.
With a view to the web standards, it is better to use a background image because icons are used for decoration and not for representing structural content.
The SplitButton provides options for:
- Using the built-in Kendo UI icons. They are applied through the
icon
property and displayed as a background for the SplitButton. To see the full list of the web font icons in Kendo UI, refer to the article on styles and layout. - Adding FontAwesome and other font icons. They are implemented by setting the required third-party CSS classes through the
iconClass
property. - Adding image icons. They are applied through the
imageUrl
property of the component.
The following example demonstrates how to use the different types of icons in a SplitButton.
@Component({
selector: 'my-app',
template: `
<div class="row example-wrapper">
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<p>Kendo UI font icon</p>
<kendo-splitbutton [data]="saveIconData" [icon]="icon">
Save
</kendo-splitbutton>
<kendo-splitbutton [data]="saveIconData" [icon]="icon"></kendo-splitbutton>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<p>FontAwsome icon</p>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<kendo-splitbutton [data]="replyData" [iconClass]="iconClass">
Reply
</kendo-splitbutton>
<kendo-splitbutton [data]="replyData" [iconClass]="iconClass"></kendo-splitbutton>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 example-col">
<p>Image icon</p>
<kendo-splitbutton [data]="saveImageData" [imageUrl]="imageUrl">
Save
</kendo-splitbutton>
<kendo-splitbutton [data]="saveImageData" [imageUrl]="imageUrl"></kendo-splitbutton>
</div>
</div>
`
})
class AppComponent {
// Built-in Kendo UI icon
public icon: string = 'save';
public saveIconData: Array<any> = [{
text: 'Save as'
}, {
text: 'Upload to drive',
icon: 'upload'
}];
// FontAwesome icon
public iconClass: string = 'fa fa-mail-reply fa-fw';
public replyData: Array<any> = [{
text: 'Reply All',
iconClass: 'fa fa-mail-reply-all fa-fw'
}, {
text: 'Forward',
iconClass: 'fa fa-mail-forward fa-fw'
}, {
text: 'Reply & Delete'
}];
// Image icon
public imageUrl: string = 'https://demos.telerik.com/kendo-ui/content/web/toolbar/save.png';
public saveImageData: Array<any> = [{
text: 'Save All'
}, {
text: 'Upload to drive',
imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/toolbar/upload.png'
}];
}