1. Angular Material

mat-icon 사용하기

1. https://material.io/icons 에서 icon 검색
2. ICON FONT 방식 중 상단 방식 사용 e.g.,<i class="material-icons">face</i>

사이즈 조절은 class 추가. e.g., class="material-icons md-18 (제공하는 최소 크기가 18px이라 mat-body-1과 사용 시 깨지는 문제가 있음...

Material component & Reactive Form 사용하기

https://obsessiveprogrammer.com/tag/mat-form-field/

https://blog.realworldfullstack.io/real-world-angular-part-3-form-formation-f78d8462da70

mat-XX & dropdown 메뉴로 AutoComplete 기능 만들기

http://www.buompris.co/ng2-tag-input/

https://github.com/Gbuomprisco/ngx-chips

전역 css font 사용하기

// styles.scss

$custom-typography: mat-typography-config(
  $font-family: 'Spoqa Han Sans, sans-serif',

  // 별도의 디스플레이 크기 표시용 (아직 할당이 안된 상태)
  $display-4:     mat-typography-level(112px, 1.6, 400), // mat-display-4
  $display-3:     mat-typography-level(56px, 1.6, 400), // mat-display-3
  $display-2:     mat-typography-level(45px, 1.6, 400), // mat-display-2
  $display-1:     mat-typography-level(1rem, 1.6, 400), // mat-display-1

  // headings
  $headline:      mat-typography-level(1.8rem, 1.6, 400), // mat-h1
  $title:         mat-typography-level(1.8rem, 1.6, 700), // mat-h2
  $subheading-2:  mat-typography-level(1.25rem, 1.6, 400), // mat-h3
  $subheading-1:  mat-typography-level(1.25rem, 1.6, 700), // mat-h4
  // paragraphs
  $body-2:        mat-typography-level(1.25rem, 1.6, 700), // mat-body-2
  $body-1:        mat-typography-level(1.25rem, 1.6, 400), // mat-body-1
  // 캡션, 버튼
  $caption:       mat-typography-level(1rem, 1.6, 300), // mat-caption
  $button:        mat-typography-level(1.25rem, 1.6, 500), // mat-button
  // input 플레이스홀더
  $input:         mat-typography-level(1rem, 1.6, 400) // mat-input
);

유의사항

1. 우측에 적어둔 클래스를 적용할 태그에 덧붙여서 사용하시면 됩니다.
2. 위 코드의 좌항, $로 시작하는 이름들은 Material에서 제공하는 다양한 컴포넌트의 타이포그래피에도 참조됩니다. (아래 참고)
3. 예를 들면 지섭님이 주로 사용하셨던 dialog의 mat-dialog-title은 $title을 사용합니다.
4. 컴포넌트 별로 다른 타이포그래피를 사용해야 하는 경우, $custom-typography 변수를 여러개 만들어서 각 믹스인에 쑤셔넣으면 됩니다만, 아직 정확한 방법을 모르고 당장 필요하지 않아서 나중에 같이 얘기해보면 될 것 같습니다. 현재로선 mat-component 사용하시다가 혼란스러울때 참고만 하세요...

// @angular/material/_theming.scss => 컴포넌트 쓰시다가 뭔가 혼란스러울 땐 여기를 보세요 suffix `-typography` 믹스인에서 `$config`를 사용하고 있다면, 제가 전역에서 커스터마이징한 `$custom-typography`가 그걸 대체하고 있는겁니다.

@mixin mat-card-typography($config) {
  .mat-card {
    font-family: mat-font-family($config);
  }

  .mat-card-title {
    font: {
      size: mat-font-size($config, headline); // config에서 설정한 $headline 설정이 카드의 타이틀로 적용됨
      weight: mat-font-weight($config, headline);
    }
  }

  .mat-card-subtitle,
  .mat-card-content,
  .mat-card-header .mat-card-title {
    font-size: mat-font-size($config, body-1);
  }
}

참고 링크

Mat Customizing 관련

• 타이포그래피

https://medium.com/@bogac/customization-of-an-angular-material-2-theme-typography-components-3ca5584f36ca

• 컬러 테마

https://alligator.io/angular/angular-material-custom-theme/

https://blog.thoughtram.io/angular/2017/05/23/custom-themes-with-angular-material.html

https://coursetro.com/posts/code/116/Create-your-own-Angular-5-Material-Theme