Icons
The Kendo UI suite for Angular delivers more than 400 integrated font icons for its components.
What Are Icon Fonts
Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can style them with CSS by using all styling properties that can be applied to a regular text in a modern browser.
Why Use Icon Fonts
The utilization of icon fonts in a user interface (UI) naturally succeeds the somehow outdated icon sprite technique.
Font icons demonstrate significant benefits such as:
- Improved scalability—While icon sprites are bitmap raster images and do not scale well, icon fonts use vector graphics, look perfect on retina displays, and make scaling as easy as setting the
font-size
configuration option. - Improved design capabilities—You can easily apply CSS effects on the fly by setting the text color, shadow, or other options for different interaction states. For example, on
:hover
. - Improved browser support—Font icons are browser-agnostic and are supported by all modern browsers.
- Reduced number of HTTP requests—To load an icon font, you need a maximum of a few HTTP requests.
- Reduced file size—A 100KB file contains approximately 500 vector icons.
Basic Usage
To use the Kendo UI font icons:
- Load a Kendo UI theme into your project.
- Assign a
k-icon
CSS class that is followed by a predefined class from the list of font icons to an HTML tag—for example, the<span>
element as in<span class="k-icon k-i-calendar"></span>
.
Using Unicode Characters
Even though the web icon font comes with a set of predefined CSS classes, you might need to use the icons with a custom CSS class name. To achieve this, set a :before
pseudo content value for the relevant icon.
<span class="k-icon my-custom-icon-class"></span>
<style>
.my-custom-icon-class:before {
content: "e13a"; /* Adds a glyph using the Unicode character number */
}
</style>
If you use the styles
property in the metadata of the component, you need to escape the content by double-backslashing it:
@Component({
selector: 'my-app',
styles: [`
.k-icon.my-custom-icon-class:before {
content: "\e13a";
}
`],
template: `
<span class="k-icon my-custom-icon-class"></span>
`
})
class AppComponent {
}
Making Visual Adjustments
You can modify each icon by using:
Sizes
To set the icon size, use the font-size
CSS property. The Kendo UI font icons are designed on a 16px grid base. To achieve a pixel-perfect icon display, scale up by maintaining the 16-unit measure (32, 48, 64, and so on).
<span class="k-icon k-i-gear"></span>
<span class="k-icon k-i-gear k-icon-32"></span>
<span class="k-icon k-i-gear k-icon-48"></span>
<span class="k-icon k-i-gear k-icon-64"></span>
<style>
.k-icon-32 {
font-size: 32px; /* Sets icon size to 32px */
}
.k-icon-48 {
font-size: 48px; /* Sets icon size to 48px */
}
.k-icon-64 {
font-size: 64px; /* Sets icon size to 64px */
}
</style>
Colors
To set the icon color, use the color
CSS property.
<span class="k-icon k-i-gear" style="color: blue;"></span>
<span class="k-icon k-i-gear colored-icon"></span>
<style>
.colored-icon {
color: green;
}
</style>
Flipping
To better accommodate an icon in your application, flip it by using the k-flip-h
and k-flip-v
predefined CSS classes.
<span class="k-icon k-i-pencil"></span>
<span class="k-icon k-i-pencil k-flip-h"></span>
<span class="k-icon k-i-pencil k-flip-v"></span>
<span class="k-icon k-i-pencil k-flip-h k-flip-v"></span>
Rendering Loading Indicator
To render a loading indicator for your component while it loads, you can use either:
- The
k-i-loading
CSS class, or - Custom logic which is based on the
*ngIf
directive and a loading mask. For a sample on how to apply the custom logic, refer to article on implementing a loading indicator in the Grid.
The following example demonstrates how to use the k-i-loading
CSS class. You can adjust the size and color of the loading indicator in the same way you make adjustments to other icons.
<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>
List of Font Icons
- Actions
- Alerts and Notifications
- Editing
- Files and Folders
- Images
- Layout and Navigation
- Mapping
- Media
- Social Sharing
- Toggle