Material Theme Overview
The Kendo UI for Angular Material theme is part of the Kendo UI for Angular library of UI components. It is distributed through NPM under the kendo-theme-material package.
Installation
-
Download and install the Kendo UI Material theme package.
shnpm install --save @progress/kendo-theme-material
-
For the next steps that include alternative approaches for theme installation, refer to the instructions in the article on styling in Kendo UI.
Dependencies
For the Kendo UI Material theme to closely implement the Material Design Guidelines, provide the Roboto font family and configure additional modules in your application.
By default, the Material theme uses the Roboto font family but the font itself is not included in the theme package.
You can add the font to the page from Google Fonts in the following way:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
<style>
body { font-family: Roboto, sans-serif; }
</style>
Additional Configuration
The following additional configuration improves the look and feel of the theme in your application:
- Use a Ripple effect—Available through the
kendoRippleContainer
directive from the@progress/kendo-angular-ripple
NPM module. ThekendoRippleContainer
directive provides the Material ink ripple effect for the Kendo UI components for Angular and is fully compatible with all available Kendo UI themes. - Use the FloatingLabel component—with HTML input elements and with Kendo UI for Angular Inputs components, dateinputs or dropdowns packages.
Preview
To apply the Material theme to any of the examples on this website, use the theme chooser drop-down at the top-right corner of the example. The Default theme styling is loaded by default.
To simultaneously preview multiple components from different packages, to build your own theme, or to customize any of the available Kendo UI ones, use the capabilities of the Kendo UI Theme Builder web application.