AngularのMaterialデザインっていいっすね。
デザイン苦手でも、Materialデザイン使ってるだけで良い感じの雰囲気になるので。これがAngularの良さっすね。
ということで今回は表題の通り、Material Iconの使い方を解説したいと思います。
目次
僕のPC環境
OS：Windows10
Angular：7
Material Icon導入方法
Materialデザインをインストール
以下を参照。
MatIconModuleをインポート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
// 共通モジュール import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatInputModule } from '@angular/material/input'; import { MatTabsModule } from '@angular/material/tabs'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { FullCalendarModule } from 'ng-fullcalendar'; // 共通サービス import { HttpService, NoopInterceptor } from './service/http/http.service'; import { LogService } from './service/log/log.service'; import { RouterService } from './service/router/router.service'; import { SweetAlertService } from 'angular-sweetalert-service'; import { UtilService } from './service/util/util.service'; // 共通コンポーネント import { AppComponent } from './app.component'; import { LoginComponent } from './component/login/login.component'; import { TimepickerComponent } from './component/timepicker/timepicker.component'; import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component'; import { IntegerComponent } from './component/integer/integer.component'; import { FullcalendarComponent } from './component/fullcalendar/fullcalendar.component'; import { IconComponent } from './component/icon/icon.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, TimepickerComponent, PageNotFoundComponent, IntegerComponent, FullcalendarComponent, IconComponent, ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, MatInputModule, MatTabsModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgbModule, FullCalendarModule ], providers: [ HttpService, LogService, RouterService, SweetAlertService, UtilService, { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true } ], bootstrap: [AppComponent] }) export class AppModule { } |
「MatIconModule」をインポートします。
index.htmlに「Material+Icons」を記載
以下は「index.html」に記載されていない場合のみです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>AngularProject</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html> |
Material Iconを使ってみる
以下のように使うだけです。
|
1 |
<mat-icon>home</mat-icon> |
Material Iconの種類
以下のサイトが参考になります。
■Icons – Material Design
URL：「https://material.io/tools/icons/?icon=accessibility&style=baseline」
ここに記載されているものは使えるようですね。
使い方は先ほどの「home」の部分を使いたいアイコン名に変更するだけです。
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
Iconを使うことで、画面のレイアウト的にも「素敵やん」状態になります。
というよりは、アイコンがあると、「何をするものなのか」が一目瞭然になります。
これだけ簡単に使えるのあれば、ガンガン使うべきですね。
ではまた！
