# 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 ```