Copy Coding

구글 맵이 유료로 변경되면서 뭔가 새로운 변화가 있나 확인도 할겸 google map 서비스를 다시 사용해 봅니다.

처음부터 프로젝트를 만들고 키 값을 설정하는 부분 까지만 진행 하고 실제 안드로이드에서 맵을 사용 하는 부분은 따로 작업을 하도록 하겠습니다.

키 값을 생성 하기 위해 프로젝트를 생성 하려면 로그인을 해야 하기 때문에 회원 가입이 되어 있어야 합니다.

1. 프로젝트 생성

1.1 프로젝트 명 만들기

Google Developers Console 사이트 (https://console.developers.google.com )에 접속합니다.

현재 신규 아이디로 로그인만 하고 아무것도 생성되지 않은 상태 입니다.

이제 처음부터 시작을 하기 위해 [프로젝트 만들기] 버튼을 클릭 합니다.

대시보드에서 [만들기] 버튼을 클릭 합니다.

사용할 프로젝트 이름을 생성하는 화면 입니다.

프로젝트 이름은 편한대로 생성 하는데 성격은 포함되도록

MyMapProj

저는 이렇게 하고 [만들기] 버튼을 클릭합니다.

잠시 기다리면 다시 프로젝트가 생성 되고 첫 화면으로 돌아 갑니다.

화면이 처음과 비슷해서 아무 일도 안 일어난것 같지만 상단에 보면 신규 프로젝트가 생성되어 있습니다.

첫 화면과 비교해 볼까요?

상단 조직 없음에서 프로젝트 이름 MyMapProj 로 변경이 되어 있습니다.

한번 뭐가 있나 MyMapProj를 눌러 봅니다.

별거 없군요. 누를 필요 없겠습니다.

1.2 구글 맵 서비스 등록

이제 생성된 프로젝트에서 사용할 API를 등록해야 합니다.

그러기 위해서는 서비스를 등록 해야 하겠지요.

[API 및 서비스 사용 설정]을 선택 합니다.

종류가 많으므로 검색 키워드를 입력 합니다.

map만 입력하면 너무 많이 나오니까 map android를 입력하고 검색 합니다.

안드로이드 앱 개발을 테스르 하기 위해 처음에 있는 Maps SDK for Android를 선택 합니다.

이제 [사용 설정] 버튼을 클릭합니다.

아~~~~~! 지겨워 한 페이지에서 다 선택 하게 하면 좋을 텐데 페이지가 너무 많네요.

화면이 다시 메인으로 넘어 오는데 예전에 못보던 할당량 이라는 메뉴가 들어 있습니다.

이게 유료화와 관련이 있나? 한번 눌러 봤습니다.

일단 여기까지. 자세한건 나중에 천천히 보고 지금 해야 하는건 사용자 인증 정보를 만드는 것입니다.

2. 사용자 인증 정보

2.1 인증 키 생성

할당량 옆에 있는 [사용자 인증 정보]를 선택 합니다.

[사용자 인증 정보 만들기]를 선택 합니다.

몇가지 선택 할 수 있는 메뉴가 나옵니다.

goole map을 사용하기 위한 키를 생성하는 것이니

[API 키] 를 선택 합니다.

잠시 생성중... 하다가 키를 하나 만들어서 보여 줍니다.

여기까지가 구글 맵을 사용하기 위한 키값 생성하는 작업 입니다.

예? 필요 없으시다 구요?

그럼 [사용중지]나 쓰레기통을 클릭하세요.

계속 진행 하려면 [API키] 또는 연필 아이콘을 클릭 합니다.

2.2 앱과 개발 장비 등록 화면

여기서 잠깐!

이 글을 찾아서 보시는 분이라면 처음 사용하는 분이라 생각됩니다.

여기에 있는 키가 안드로이드 스튜디오에서 구글 맵을 추가할 때 사용하는 인증 키 입니다.

아래에서 설명 하는 내용은 이 키 값을 가지고 만들게 되는 앱과 컴퓨터 정보를 등록하는 부분입니다.

자신의 용도에 맞게 라디오 버튼을 선택 하고 [저장] 버튼을 클릭 합니다.

Android 앱에서 사용하려고 하는 거라 Android 앱 라디오 버튼을 누르면 하단에 지문 추가 항목이 나타납니다.

패키지 이름은 자신이 만들려는 앱의 패키지 이름입니다.

SHA-1 인증서 지문은 앱 개발을 하는 컴퓨터의 인증서 지문을 말합니다.

즉, 안드로이드 스튜디오로 생성할 프로젝트를 등록하고 컴퓨터에서 생성한 인증서도 등록 합니다.

여기서 부터는 잠시 웹을 중단하고 자신의 컴퓨터에서 작업을 시작 합니다.

잠시 휴식...

2.3 SHA-1 인증서 지문 생성

keytool 명령을 사용해서 인증서를 생성 하는데 안된다면 keytool이 어디 있는지 확인 합니다.

java를 어디에 설치 했는가에 따라 다르겠지만

C:\Java\jdk1.8.0_131\bin 이곳에 있습니다.

console창의 위치를 이동 하거나 path를 잡아서 명령을 실행 합니다.

콘솔 창을 하나 열어서 키를 생성 해 보도록 합니다.

c:\>keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

그림의  SHA1이 인증서 지문 입니다.

2.4 패키지 이름 생성

이젠 안드로이드 프로젝트를 하나 생성 합니다.

MapTest 이라는 이름으로 생성을 하겠습니다.

프로젝트 명을 입력하는 화면 하단에 Package name이 있습니다.

com.example.컴퓨터이름.프로젝트명 이런식으로 나타나는데 [Edit] 버튼을 누르면 편집이 가능 합니다.

필요하면 편집을 하고 [Done] 버튼을 누르면 반영이 됩니다.

패키지 이름을 변경하려고 합니다.

com.android.google.maptest 이렇게 변경을 해 보았습니다.

2.4 API 키에 패키지 이름 및 인증서 지문 등록

패키지 이름과 SHA-1 인증서 지문이 모두 준비 되었습니다.

이제 웹 작업을 마무리 할 때가 되었습니다.

다시 웹 페이지로 돌아 갑니다.

깜짝 놀랄 수도 있지만 이해를 돕고자 예전에 만들어 놓은 인증정보를 가지고 설명을 하겠습니다.

인증서 지문이 다양하게 있죠?

일부는 노트북에서 인증서 지문을 만들고 앱을 개발한 내용이고

일부는 데스크 탑에서 인증서 지문을 만들고 앱을 개발한 내용입니다.

컴퓨터 마다 또는 생성 할 때 마다 다르게 만들어집니다.

빨간색 박스가 이번에 만든 패키지와 인증서 지문 입니다.

API 키는 개인에게 부여된 google map을 사용하기 위한 하나의 키 값이고 컴퓨터 마다 패키지와 인증서 지문을 등록 하는 것 입니다.

그렇다고 프로젝트를 만들 때마다 인증서 지문을 만드는건 아닙니다.

위에서 보듯이 동일한 인증서 지문에 패키지 이름(새로 생성한 프로젝트)을 입력하고 [저장]버튼을 누르면 됩니다.

새로 프로젝트를 만들면 패키지명은 새로 추가되고 인증서지문은 동일한걸 사용하면 됩니다.

요 빨간색 박스의 키가 개인에게 부여된 키이고 위에서 한 작업은 프로젝트와 작업 컴퓨터를 키에 등록한다고 생각하면 됩니다.

키 값은 개인에게 부여된 값이기 때문에 구글 맵 사용이 유료화가 되었으니 중요도가 더 높아졌습니다.

잘 보관하여 사용 하세요.

다음에는 키 값을 가지고 구글 맵을 한번 생성해 보겠습니다.

- copy coding -

인터넷에서 다운받거나 개인이 생성한 material icon을 사용하는 방법을 소개 합니다.

src 경로만 잡아주면 좋을텐데 귀찮은 몇가지 설정을 해야 합니다.

1. icon 준비

인터넷에서 무료 아이콘을 다운로드 받거나 직접 제작한 icon을 준비 합니다.

준비된 아이콘을 프로젝트의 assets 디렉토리에 저장 합니다.

/src/assets/images/ alarm_on-24px.svg

저는 이렇게 저장이 되어 있습니다.

2. 설정 및 등록

웹에서 사용자 정의 아이템을 사용 할 수 있도록 설정을 하고 아이콘을 등록하는 작업을 수행 합니다.

/src/app/app.module.ts

파일을 열고 사용자 정의 모듈을 import 합니다.

import { HttpClientModule } from '@angular/common/http';

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule
  ],

/src/app/material-test/material-test.component.ts

파일을 열고 아이콘을 등록 합니다.

아이콘 path는 보안을 위해 DomSanitizer를 이용 합니다.

import { DomSanitizer } from '@angular/platform-browser';

import { MatIconRegistry } from '@angular/material';

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'alarm_on',
        sanitizer.bypassSecurityTrustResourceUrl('assets/images/alarm_on-24px.svg'));
}

설정은 이렇게 하면 끝입니다.

3. icon 출력

이제 아이콘을 사용하여 화면에 표시만 하면 됩니다.

/src/app/material-test/material-test.component.html

파일을 열고 아이콘을 사용합니다.

<mat-icon svgIcon="alarm_on"></mat-icon>

출력을 해봅니다.

이런식으로 사용 하면 됩니다.

4. Source Code

기존 icon code에 추가했습니다.

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

/src/app/material-test/material-test.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';


@Component({
  selector: 'app-material-test',
  templateUrl: './material-test.component.html',
  styleUrls: ['./material-test.component.css']
})
export class MaterialTestComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'alarm_on',
        sanitizer.bypassSecurityTrustResourceUrl('assets/images/alarm_on-24px.svg'));
  }


  ngOnInit() {
  }
}

/src/app/material-test/material-test.component.html

<mat-icon svgIcon="alarm_on"></mat-icon>

- copy coding -

아이콘은 일반적인 이미지 형태로 제공 되어 문장의 성격을 암시하기도 Button에 삽입되기도 합니다.

이미 많은 카테고리 별로 아이콘이 구분되어 제공 되고 있고 google 이외에도 자체 제작한 아이콘을 제공하고 있는 업체들도 많이 있어 선택의 폭이 넓습니다.

1. 아이콘 사용법

1.1 일반적인 사용법

<mat-icon></mat-icon> 태그를 이용하면 어디서나 사용 가능 합니다.

그리고 태그 사이에 아이콘 명칭을 기입합니다.

<mat-icon>android</mat-icon>

이렇게 하면 화면에서 안드로이드 아이콘이 나오는 것을 확인 할 수 있습니다.

1.2 사이즈 조절

angular material icon은 font 사이트 조절과 같은 방식으로 해주면 적용 됩니다.

css를 설정하고

.material-icons.md-18 { font-size: 18px; }

.material-icons.md-48 { font-size: 48px; }

<mat-icon class="material-icons md-18">android</mat-icon>

<mat-icon class="material-icons md-48">android</mat-icon>

적용을 하면 됩니다.

1.3 색상 조절

size를 일반 폰트처럼 한다고 했으니 색상도 동일 하겠죠?

좀 큰 폰트에 오랜지 색과 파란색을 정의 합니다.

.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }

.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }

그리고 적용을 합니다.

<mat-icon class="material-icons md-48 orange">android</mat-icon> &nbsp;&nbsp;

<mat-icon class="material-icons md-48 blue">android</mat-icon>

&nbsp;&nbsp; 이걸 안하면 넘 붙어있어서 자체 검열…

나 사진 찍을 때랑 똑 같은 차렸자세.

1.4 투명도 조절

아이콘은 투명도 조절도 가능 합니다.

투명도 적용을 하려면 css에서 alpha 값을 0.0 에서 1.0 까지의 값을 적용 합니다.

0.0을 적용하면 화면에 보이지 않기 때문에 0.1로 했습니다.

.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }

.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1); }

적용을 해서 확인해 봅니다.

<mat-icon class="material-icons md-48 blue100">android</mat-icon> &nbsp;&nbsp;

<mat-icon class="material-icons md-48 blue10">android</mat-icon>

2. 전체 적용

위에서 설명한 내용을 전체 적용해 보았습니다.

2.1 css 파일

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }
.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }
.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }
.material-icons.md-48.blue50 { font-size: 48px; color: rgba(0, 0, 255, 0.5); }
.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1);

2.2 html 파일

<table>
    <tr>
        <td width="50" align="right"><mat-icon class="material-icons md-18">android</mat-icon></td>
        <td>.material-icons.md-18 { font-size: 18px; } </td>
    </tr>
    <tr>
        <td width="50" align="right"><mat-icon class="material-icons md-24">android</mat-icon></td>
        <td>.material-icons.md-24 { font-size: 24px; } </td>
    </tr>
    <tr>
        <td width="50" align="center"><mat-icon class="material-icons md-36">android</mat-icon></td>
        <td>.material-icons.md-36 { font-size: 36px; } </td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48">android</mat-icon></td>
        <td>.material-icons.md-48 { font-size: 48px; } </td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 orange">android</mat-icon></td>
        <td>.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }</td>
    </tr>

    <tr>
        <td><mat-icon class="material-icons md-48 blue">android</mat-icon></td>
        <td>.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue100">android</mat-icon></td>
        <td>.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue50">android</mat-icon></td>
        <td>.material-icons.md-48.blue50 { font-size: 48px; color: rgba(0, 0, 255, 0.5); }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue10">android</mat-icon></td>
        <td>.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1); }</td>
    </tr>
</table>

2.3 결과

3. 아이콘 종류

현재 재공되고 있는 아이콘의 카테고리 별 종류의 아주 일부분을 가져와 보았습니다.

참조한 사이트는

https://material.io/tools/icons/?style=baseline

입니다.

3.1 Action

3.2 Alert

3.3 Av

3.4 Communication

3.5 Content

3.6 Device

3.7 Editor

3.8 File

3.9 Hardware

3.10 Image

3.11 Maps

3.12 Navigation

3.13 Notification

3.14 Places

3.15 Social

3.16 Toggle

- copy coding -

Angular material에서 제공하는 버튼은 바로 기본적으로 제공하고 있는 기능 만으로도 충분히 사용 가능 합니다.

다양한 형태 및 기본으로 제공되는 아이콘만으로도 혼자서 사이트를 꾸미는 것도 가능하리라 생각 됩니다.

버튼의 종류에 대한 간단한 설명을 한다면

이렇게 설명을 할 수가 있겠고요.

버튼의 모양은

각 속성별로 이렇게 생겼습니다.

그럼 구현을 해보도록 하겠습니다.

1. Component 추가

제일 먼저 component 추가를 해보겠습니다.

component가 화면 하나를 만드는 것으로 생각 하면 됩니다.

프로젝트에 마우스를 놓고 우측 버튼을 클릭 합니다.

New > Component

를 선택 하면 컴포넌트 생성 팝업 창이 나타납니다.

저는 새로 생성하는 component 명칭을

material-test

로 하였습니다.

[Finish] 버튼을 클릭하고 잠시 기다립니다.

시간이 지나면 프로젝트에 material-test 폴더가 생기고 파일들도 만들어 집니다.

2. 화면 추가

material-test로 화면을 만들었으니 웹 브라우저에서 볼 수 있도록 추가를 해줘야 합니다.

material-test.component.ts

파일에 명시된

app-material-test를 index.htm에 추가하는 작업입니다.

2.1 module에 추가

/myNgProject/src/app/app.module.ts

파일을 열어보니 생성하면서 자동으로 material-test component 가 import 되어 있습니다.

import { MaterialTestComponent } from './material-test/material-test.component';

자동으로 import 되었다고 화면도 자동으로 연결 되는게 아닙니다.

bootstrap: [AppComponent, MaterialTestComponent]

2.2 html에 추가

module에 추가해서 사용 할 수 있도록 했으니 이제 화면에 추가를 합니다.

/myNgProject/src/index.html

파일을 열고 추가를 합니다.

<app-material-test></app-material-test>

이제 새로 생성한 material-test.component.html 에 HTML 작업을 하면 index.html에 나타나게 됩니다.

2.3 버튼 html 작업

새로 추가한 material-test.component.html에 버튼 관련 html tag 작업을 진행 합니다.

html 일부분을 가져와 보았습니다.

<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

이런식으로 작업을 하면 되겠죠.

이렇게 하면 화면 작업은 끝입니다.

이제 설정을 해야 합니다.

3. 버튼 환경 설정

html에 버튼 태그 작업을 하면 바로 적용 되는게 아니라 angular에서 제공하는 module, css등을 추가해야 합니다.

3.1 Module 추가

/myNgProject/src/app/app.module.ts

파일을 열고 버튼과 버튼에 추가하는 아이콘 관련 모듈을 추가해 줍니다.

import { MatButtonModule } from '@angular/material/button';

import { MatIconModule } from '@angular/material/icon';

그리고 imports에 모듈명을 추가해 줍니다.

이건 일부분만 가져오기 그래서 전체적인 파일 모습은

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

이렇습니다.

3.2 css 추가

CSS를 추가하는 방법은 2가지가 있습니다.

index.html 파일에 링크형식으로 불러서

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

이렇게 추가 하거나

/src/styles.css 파일에

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

요렇게 추가하면 됩니다.

저는 개인적으로 두번째를 선호합니다.

4. 테스트

모든 작업이 완료 되었습니다.

테스트를 진행 하면 됩니다.

프로젝트에 마우스를 대고 우측 버튼 > Run As > Angular Web Application을 선택하면

결과를 보실 수 있습니다.

5. Source Code

Button을 테스트 하기 위해 작업한 파일들이 어떤건지 한번 볼까요?

html 과 mode 을 제외하고는 환경설정 관련 입니다.

/src/app/material-test/material-test.component.css

.button-row button,
.button-row a {
  margin-right: 8px;
}

/src/app/material-test/material-test.component.html

<p>
  material button test!
</p>
<h3>mat-button</h3>
<div class="button-row">
  <button mat-button>Basic</button>
  <button mat-button color="primary">Primary</button>
  <button mat-button color="accent">Accent</button>
  <button mat-button color="warn">Warn</button>
  <button mat-button disabled>Disabled</button>
  <a mat-button routerLink=".">Link</a>
</div>

<h3>mat-stroked-button</h3>
<div class="button-row">
  <button mat-stroked-button>Basic</button>
  <button mat-stroked-button color="primary">Primary</button>
  <button mat-stroked-button color="accent">Accent</button>
  <button mat-stroked-button color="warn">Warn</button>
  <button mat-stroked-button disabled>Disabled</button>
  <a mat-stroked-button routerLink=".">Link</a>
</div>

<h3>mat-flat-button</h3>
<div class="button-row">
  <button mat-flat-button>Basic</button>
  <button mat-flat-button color="primary">Primary</button>
  <button mat-flat-button color="accent">Accent</button>
  <button mat-flat-button color="warn">Warn</button>
  <button mat-flat-button disabled>Disabled</button>
  <button mat-flat-button color="warn">favorite</button>
  <a mat-flat-button routerLink=".">Link</a>
</div>

<h3>mat-raised-button</h3>
<div class="button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>

<h3>mat-fab</h3>
<div class="button-row">
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h3>mat-mini-fab</h3>
<div class="button-row">
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="icon">free_breakfast</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

<h3>mat-icon-button</h3>
<div class="button-row">
  <button mat-icon-button>
    <mat-icon aria-label="test">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="primary">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="accent">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button color="warn">
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
  <button mat-icon-button disabled>
    <mat-icon aria-label="icon">access_alarms</mat-icon>
  </button>
</div>

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CompanyVisionComponent } from './company-vision/company-vision.component';

// Material - animation
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MaterialTestComponent } from './material-test/material-test.component';

@NgModule({
  declarations: [
    AppComponent,
    CompanyVisionComponent,
    MaterialTestComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent, MaterialTestComponent]
})
export class AppModule { }

/src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyNgProject</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <app-material-test></app-material-test>
</body>
</html>

/src/styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

- copy coding -