はじめに

material icons を css でカスタマイズしてよく見るログインアイコンを作る流れをまとめます。
早い話このアイコンです。

material icons を css でカスタマイズする流れ

まずは~~パクり~~参考にしたいiconのカラーコードを取得したいところです。
私は以下のサイトに~~パクり~~参考にしたい画像を放り込んでカラーコードを取得することがあります。

あとはhtml/cssを書くだけですね。

<button mat-icon-button >
  <mat-icon class="login-icon">person</mat-icon>
</button>

.login-icon {
  background: #a4c4fc;
  color: #4374e3;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

material icons は background 指定できるんですね。
と言う気付きでした。

material icons を css でカスタマイズしてよく見るログインアイコンを作る流れをまとめます。