Integrating latest Material Design Web components in Angular

> In this quick tutorial, we will learn how to integrate @material/web components with example of buttons in Angular. Before we jump to coding, let's understand what is Material Design, Web Components and Material Web 1.0. ## Material Design Material Design is a design system built and supported by Google designers and developers. Guidelines for building Material apps and components are published on [material.io](https://material.io/). The latest version, Material 3, enables personal, adaptive, and expressive experiences – from dynamic color and enhanced accessibility, to foundations for large screen layouts and design tokens. ## Web Components [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) are custom HTML elements with encapsulated styles and behavior. They work across many different frameworks (such as Angular, Lit, React, Vue, and Svelte) as well as web environments (such as Eleventy, Wordpress, and Ruby on Rails). ## Material Web 1.0 [Material Design team](https://twitter.com/materialdesign) recently announced the release of Material Web 1.0. [](https://twitter.com/materialdesign/status/1714378297696461160) Material Web is Google’s component library for building applications that work in any web framework. Each component has been reviewed by Material 3 designers and accessibility engineers for use in production. ### What's in 1.0? - ⚙️ 19 components, including buttons, checkboxes, chips, text fields, selects, and dialogs - 🎨 CSS theming for dynamic color, fonts, and Material tokens - ♿️ Accessibility for screen readers and high contrast - 📖 Documentation and guides - 📋 `` element support - 🏗️ Cross-framework support, including Lit, React, Vue, and Svelte - 🤖 Basic Lit SSR support - 👏 Fewer breaking changes ### Components You can check all the components and their respective documentation at [material-web.dev](https://material-web.dev/). ### Tech Stack Material Web components are generated using [Lit](https://lit.dev/). Lit is a simple library for building fast, lightweight web components. ## Usage in Angular For this tutorial, we will focus on implementing button components from `@material/web` in Angular application, let's get started! ### 1. Creating the application ```bash ng new material-web-ng --defaults --minimal --standalone ``` ### 2. Install `@material/web` ```bash npm install @material/web ``` ### 3. Add Material Design buttons Now, go to `src/app/app.component.ts`, and remove all content from `template` and remove `styles`. As we are going to use non-Angular components, we will need to add `CUSTOM_ELEMENTS_SCHEMA` in `schemas`. For starters, we will simply try to add [Elevated buttons](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e) in our application. To do so, we will write an `import` statement from `@material/web/button/elevated-button` and simply put `` in template. ```typescript import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import "@material/web/button/elevated-button"; @Component({ selector: "app-root", standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: ` Elevated ` }) export class AppComponent {} ``` Let's look at the output:  Congratulations! You just added your very first Material Design Web Component in your Angular application! ### 4. Fixing fonts At this point, your button works fine. But, you will notice that fonts are not rendered as expected. It's because we haven't loaded the fonts required by Material Design Web Components. Let's add `Roboto` fonts in `` of `src/index.html` file: ```html ``` Now your button will look perfect!  With the similar approach, you can add other variants of buttons, like filled, text, filled-tonal and outlined. ## Conclusion We learned what is Material Design and components. And then we integrated `@material/web`'s Elevated button in the Angular application. I hope this quick tutorial will help you integrate latest guidelines of Material Design in your Angular applications. The code is available on GitHub at [Angular-Material-Dev/material-web-ng](https://github.com/Angular-Material-Dev/material-web-ng). ## Live Playground