# Getting Started Angular components with a beautiful design ready for copying and pasting, following Material Design specifications. ## Requirements All of the components in Angular Material Dev are designed for/with the following versions: | Package | Version | | ------------- | ------- | | Angular | 17.0.0 | | @material/web | 1.4.1 | | @angular/cdk | 17.0.0 | ## Set up for Material Web (Material 3 Designs) Follow below steps if the component follows Material 3 designs. You will see palette chip in component docs. ### Environment setup Below is step-by-step guideline to get your local environment and setup ready to use components: 1. Setup an angular workspace locally with SCSS ```bash npm i -g @angular/cli ng new my-app --style scss ``` 2. Install `@angular/cdk` ```bash ng add @angular/cdk ``` 3. Install `@material/web@1.4.0` ```bash npm i @material/web@1.4.0 ``` ### Theming (Optional) This is optional, if you're ok with default theme, you can safely skip this step. To create and import custom theme, please follow below steps: 1. Create and export CSS files from [Material Theme Builder](https://m3.material.io/theme-builder#/custom) 2. Place all CSS files in your application at `src/styles/m3` 3. Import `src/styles/m3/theme.css` file in your application's `src/styles.scss` file ```scss @import './styles/m3/theme.css'; ``` ### Typography By default, "Roboto" fonts are supported in Material Web. If you want to continue with it, be sure to include it in `index.html`: ```html ``` If you want to change the fonts, do following. We will assume that you want to change the fonts to `'Open Sans'`: 1. Include the fonts in `index.html` ```html ``` 2. Change typeface tokens and add following code in your `src/styles.scss` file: ```scss :root { --md-ref-typeface-brand: 'Open Sans'; --md-ref-typeface-plain: system-ui; } ``` 3. For more changes, refer to [Material Web Typography](https://material-web.dev/theming/typography/) ### Material Symbols To use icons from Material Symbols, make sure to include that fonts in `index.html`: ```html ```
Support Free Content Creation

Contributions & Support

Even though the courses and articles are available at no cost, your support in my endeavor to deliver top-notch educational content would be highly valued. Your decision to contribute aids me in persistently improving the course, creating additional resources, and maintaining the accessibility of these materials for all. I'm grateful for your consideration to contribute and make a meaningful difference!

Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter)