All Components

Overview

The Kendo UI Material theme is available through the @progress/kendo-theme-material NPM module.

Installation

  1. Download and install the package of the Material theme.

    npm install --save @progress/kendo-theme-material
  2. Include the Material theme in your application according to the instructions in the article on styling.

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.

Fonts

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. The kendoRippleContainer 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 Floating labels—Available through the kendo-textbox-container component from the @progress/kendo-angular-inputs NPM module. The TextBox enables you to provide floating labels to input elements and Kendo UI components.

Preview

The following example previews Kendo UI components which are styled with the Material theme.

In this article