New to Kendo UI for Angular? Start a free 30-day trial
SVG Icons
As of the R3 2020, Kendo UI delivers more than 500 Scalable Vector Graphics (SVG) icons.
Currently, you can use the predefined set of SVG icons with the Kendo UI for Angular SVG Icon component only.
What Are SVG Icons
SVG icons are vector images defined in an XML format. They are basically blocks of XML tags and allow vector graphics to be displayed on a webpage.
Why Use SVG Icons
If you need to display vector graphics within a webpage, you can use font icons and SVG icons.
SVG icons are best suited to be used in terms of:
- Rendering and scalability—They are treated by the browsers as images, so anti-aliasing issues are avoided. This ensures that SVG icons are sharp at all resolutions, without losing quality.
- Flexibility—You can control individual parts of an SVG icon with CSS (font-size, color, animation). Also, you can use available SVG-specific CSS filters and stroke properties. Multi-color SVG icons are supported.
- Accessibility—Using semantic elements and attributes, such as
<title>,<desc>,aria-labelledby, and so on, makes them accessible to screen readers, search engines, and other devices.
Basic Usage
To use the Kendo UI SVG icons, refer to the Kendo UI for Angular SVG Icon component.
List of SVG Icons
For the full list of the available predefined Kendo UI SVG icons, refer to this section.
