【Angular】Material Iconの使い方！種類が豊富っす！│泉浩兵ブログ

AngularのMaterialデザインっていいっすね。

デザイン苦手でも、Materialデザイン使ってるだけで良い感じの雰囲気になるので。これがAngularの良さっすね。

ということで今回は表題の通り、Material Iconの使い方を解説したいと思います。

1 Material Icon導入方法
2 Material Iconを使ってみる
3 Material Iconの種類
4 おすすめ書籍
5 まとめ

Material Icon導入方法

Materialデザインをインストール

以下を参照。

【Angular7】Materialデザインの使い方を解説！

AngularとMaterialデザインの組み合わせって素晴らしいーー。 AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。ということで今回は、Angularで[…]

MatIconModuleをインポート

// 共通モジュール
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 { }

// 共通モジュール

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」に記載されていない場合のみです。

<!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>

<!doctype html>

<head>

<title>AngularProject</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Material Iconを使ってみる

以下のように使うだけです。

<mat-icon>home</mat-icon>

1	<mat-icon>home</mat-icon>

Material Iconの種類

以下のサイトが参考になります。

・Icons – Material Design

ここに記載されているものは使えるようですね。

使い方は先ほどの「home」の部分を使いたいアイコン名に変更するだけです。

まとめ

Iconを使うことで、画面のレイアウト的にも「素敵やん」状態になります。

というよりは、アイコンがあると、「何をするものなのか」が一目瞭然になります。

これだけ簡単に使えるのあれば、ガンガン使うべきですね。

ではまた！

フォローしてもらえると泣いて喜びます

フォローする

【Angular】Material Iconの使い方！種類が豊富っす！