Displaying a Kendo UI Clear Icon in a Span Element

Updated on Nov 12, 2025

Environment

Product	Kendo UI for jQuery
Version	2025.3.1002

Description

I want to display a Kendo UI clear icon inside a span element. This requires rendering the Kendo UI SVG icons programmatically and styling them if necessary.

This knowledge base article also answers the following questions:

• How can I add a Kendo UI clear icon to a span element?
• How do I use Kendo UI SVG icons in jQuery?
• How can I style a clear icon inside a span element?

Solution

To display the Kendo UI clear icon inside a span element, follow these steps:

1. Add a span element to your markup:

html

<span id="clearIcon"></span>

2. Render the Kendo UI "clear" (x) SVG icon inside the span using JavaScript:

javascript

// Ensure Kendo UI is set to use SVG icons (if not changed by default is 'svg')
kendo.setDefaults('iconType', 'svg');

// Append the clear icon to the span
$('#clearIcon').append(kendo.ui.icon('x'));

3. (Optional) Style the icon using CSS:

css

span.k-svg-i-x {
    padding-top: 5px;
}

The Kendo UI "clear" (x) icon will be displayed inside the span element. You can customize its appearance further or add event handlers as required.

  <span id="clearIcon"></span>

  <script>
    // Ensure Kendo UI is set to use SVG icons (if not already set)
	kendo.setDefaults('iconType', 'svg');

	// Append the clear icon to the span
	$('#clearIcon').append(kendo.ui.icon('x'));
  </script>
  <style>
    span.k-svg-i-x {
    padding-top: 5px;
	}
  </style>

See Also

• Kendo UI SVG Icons Documentation
• Kendo UI for jQuery Overview