逆に、使わないなんて損！Material Symbolsの導入から活用法まで
ソフトウェアエンジニアにとって、どう役に立つ？
逆に、UI/UXを考えるときに、いちいちアイコンを自作するのって、めちゃくちゃ面倒じゃないですか？
このMaterial Design iconsを使うと、高品質で統一感のあるアイコンを簡単にプロジェクトに組み込めます。デザイナーがいないチームでも、見栄えのいいアプリやウェブサイトが作れちゃいます。
逆に、こんなメリットがあるんですよ！
統一感のあるデザイン
Googleが提供しているから、AndroidやiOS、ウェブで共通のアイコンを使えて、アプリ全体に一貫性を持たせることができます。
豊富なアイコン
膨大な数のアイコンが用意されていて、あなたのプロジェクトに必要なアイコンがきっと見つかります。
カスタマイズ可能
色やサイズを自由に変えられます。プロジェクトのテーマに合わせてアイコンを調整できるのが嬉しいですね。
軽量
SVG形式などで提供されているので、画像ファイルと比べて軽量で、読み込みが速いです。アプリのパフォーマンス向上にも繋がります。
導入方法（例）
逆に、導入はめちゃくちゃ簡単なんですよ！
ここでは、ウェブとAndroidでの導入方法を紹介しますね。
ウェブの場合
ウェブなら、HTMLにCSSを読み込むだけでOKです。逆に、こんな感じで、びっくりするくらいシンプルです。
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<span class="material-symbols-outlined">
home
</span>
</body>
逆に、Androidの場合
Android Studioを使っているなら、もっと簡単です。
アイコンの追加
res > drawable フォルダを右クリックして、New > Vector Asset を選択します。
アイコンの選択
Clip Art をクリックして、使いたいアイコンを検索して選びます。
完了
あとは、Next と Finish をクリックすれば、XML形式のアイコンが追加されます。
これで、XMLレイアウトでアイコンを簡単に使えます。
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_home_24"
android:contentDescription="Home Icon" />
サンプルコード例
逆に、こんな風に、色々使えちゃうんですよ！
例えば、ウェブでこんな風にボタンを作ってみましょう。
<button class="icon-button">
<span class="material-symbols-outlined">
favorite
</span>
いいね！
</button>
<style>
.icon-button {
display: flex;
align-items: center;
gap: 8px; /* アイコンとテキストの間隔 */
padding: 10px 20px;
border-radius: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
cursor: pointer;
}
</style>
逆に、まとめると…
