Material Icons

マテリアルアイコンズ

Material Icons を分かりやすく

Material Icons は、Material UI のコンポーネントの一つ。Google が提供するアイコンセットで、デザインガイドライン「Material Design」に基づいています。美しくシンプルなアイコンが多数含まれており、ウェブサイトやアプリケーションのデザインに活用できます。開発者は、ライブラリをインポートして簡単にアイコンを表示できます。

Material Icons を使うメリット

Material Icons を利用するメリットは以下の通りです。

豊富なアイコンが提供されているため、デザインの幅が広がります。
シンプルで統一感のあるデザインが特徴で、ユーザーにとって分かりやすくなります。
ライブラリをインポートするだけで使えるため、開発者にとって手軽です。

Material Icons を実装

Next.js と TypeScript を用いたプロジェクトで Material Icons を利用するためには、まず依存パッケージをインストールします。

npm install @material-ui/icons @material-ui/core

次に、アイコンを利用したいコンポーネントで、必要なアイコンをインポートします。例えば、Home アイコンを表示する場合は、以下のように記述します。

// components/IconButton.tsx
import React from 'react'
import HomeIcon from '@material-ui/icons/Home'
import { IconButton } from '@material-ui/core'

const HomeIconButton = () => {
  return (
    <IconButton color="primary" aria-label="home">
      <HomeIcon />
    </IconButton>
  )
}

export default HomeIconButton

ここでは、HomeIcon コンポーネントと、@material-ui/core の IconButton コンポーネントを利用しています。IconButton は、アイコンボタンを簡単に作成できるコンポーネントです。

最後に、作成した HomeIconButton コンポーネントをページに追加します。

// pages/index.tsx
import React from 'react'
import HomeIconButton from 'components/HomeIconButton'

const IndexPage = () => {
  return (
    <div>
      <h1>Welcome to the Programming Material Page!</h1>
      <HomeIconButton />
    </div>
  )
}

export default IndexPage

これで、HomeIconButton コンポーネントが index.tsx ページに表示されます。同様に、他のマテリアルアイコンもインポートして使用できます。

カスタムスタイルの適用

Material Icons はカスタムスタイルを適用することも可能です。例えば、アイコンのサイズや色を変更する場合は、以下のように記述します。

// components/StyledIconButton.tsx
import React from 'react'
import HomeIcon from '@material-ui/icons/Home'
import { IconButton, makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
  root: {
    fontSize: 48,
    color: '#f50057',
  },
})

const StyledIconButton = () => {
  const classes = useStyles()

  return (
    <IconButton className={classes.root} aria-label="home">
      <HomeIcon />
    </IconButton>
  )
}

export default StyledIconButton

この例では、makeStyles を用いてカスタムスタイルを作成し、useStyles フックでスタイルを適用しています。この方法で、Material Icons の見た目を自由に変更できます。

まとめ

Material Icons を Next.js と TypeScript のプロジェクトで利用する方法を解説しました。Material Icons は豊富なアイコンが提供されており、シンプルで統一感のあるデザインが特徴です。また、カスタムスタイルを適用することで、アイコンの見た目を自由に変更できます。

Next.js を学ぶ一覧へ