Kendo UI for Vue delivers more than 500 Scalable Vector Graphics (SVG) icons.
Currently, you can use the predefined set of SVG icons with the Kendo UI for Vue SVG Icon component only.
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.
If you need to display vector graphics within a webpage, you can use font icons and
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
aria-labelledby, and so on, makes them accessible to screen readers, search engines, and other devices.
To use the Kendo UI SVG icons, refer to the Kendo UI for Vue Native SVG Icon component.
- Themes and Styling in Kendo UI for Vue
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Kendo UI for Vue Native Components