※本ページにはプロモーション(広告)が含まれています

【2026年最新版】Google Fontsの新Material Symbolsアイコンが豆腐□で表示される対処法【完全ガイド】

Webサイトの実装中に、Material Symbolsを使ってアイコンを表示しようとしたら、肝心のアイコンが「□」(豆腐文字)になってしまった経験はありませんか。あるいは、ローカル環境では表示されるのに、本番環境にデプロイした途端に表示されなくなった、というトラブルも頻発しています。

この問題は、新しいMaterial Symbols(2022年以降のバージョン)が従来のMaterial Iconsと根本的に異なる仕組みで動いていることに起因します。Variable Font形式への移行、ligature機能への依存、CDN URLの変更、対応ブラウザの制約、そしてサイズ・ウェイト・グレード・オプティカルサイズの4軸パラメータの設定不足など、複数の要因が組み合わさって発生します。本記事では、フォント読み込みからレンダリングまでを完全に解説し、確実に表示させる方法をご紹介します。

この記事でわかること

• Material SymbolsとMaterial Iconsの違い
• 豆腐文字になる8つの典型的な原因
• 正しいCDN URLの選び方とパフォーマンス最適化
• ligature classnameを使った正しい実装方法
• Variable Fontパラメータの設定方法
• 対応ブラウザの確認とフォールバック実装

Material SymbolsとMaterial Iconsの違い

まずは混同されがちな2つを明確にしておきましょう。

Material Icons(旧)

2014年から提供されている従来型のアイコンフォント。各アイコンに固有のUnicode点が割り当てられており、CSSのcontent指定や、特定のクラス名で表示します。形状はFilledのみで、サイズ変更も限定的です。

Material Symbols(新)

2022年に登場した次世代版。Variable Fontフォーマット(woff2)を採用し、1つのフォントファイルに「Filled」「Outlined」「Rounded」「Sharp」といった複数のスタイルを内包しています。また、以下の4つの軸でリアルタイムにバリエーションを変更できます。

• Weight: 100〜700の太さ
• Grade: -25〜200の濃淡
• Optical Size: 20〜48ピクセルでの視認性最適化
• Fill: 0(線画) / 1(塗りつぶし)

これにより表現力が飛躍的に向上した反面、実装ハードルも上がっています。豆腐文字問題のほとんどは、この新しい仕組みを正しく理解していないことが原因で発生します。

原因1: CDN URLが古いまたは間違っている

Material Iconsで使っていたCDN URLをそのままMaterial Symbolsで使い回すと、当然ながら正常に動作しません。新旧で全く別のフォントファイルを参照しています。

正しいURL(Material Symbols Outlined)

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

Roundedバリアント

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet">

Sharpバリアント

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet">

必要なバリアントだけを読み込むのが基本です。3種類すべて読み込むと、ファイルサイズが3倍になりパフォーマンスを損ないます。

Variable Font軸を含めた本格的な指定

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

これで4軸すべてのバリエーションが利用可能になります。ただしファイルサイズが大きくなるため、デザインで使用する範囲だけを指定するのが理想です。

原因2: ligature機能が働いていない

Material Symbolsの最大の特徴は、HTMLにアイコン名をそのまま書くだけで、対応する図形が表示されるligature(合字)機能です。

<span class="material-symbols-outlined">
  home
</span>

これだけで家のアイコンが表示されます。「home」という文字列がligature機能によってアイコンに置き換わるためです。ところが、ligatureを正しく動作させるには、CSSで以下のプロパティが必須となります。

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

とくに重要なのは「-webkit-font-feature-settings: ‘liga’;」と「letter-spacing: normal;」です。これらが指定されていないと、ligatureが正しく解釈されず、文字列がそのまま「home」と表示されたり、豆腐文字になったりします。

原因3: クラス名のtypo

Material Iconsでは「material-icons」というクラス名でしたが、Material Symbolsでは「material-symbols-outlined」「material-symbols-rounded」「material-symbols-sharp」と長くなっています。コピー&ペーストミスや、旧クラス名の流用で表示されないケースが非常に多いです。

以下のチェックリストで確認してください。

• クラス名のスペルが正確か
• 読み込んだフォントファミリーとクラス名が一致しているか(OutlinedをロードしてRoundedクラスを使っていないか)
• CSSのフォントファミリー名がGoogle Fontsの指定と完全一致しているか

原因4: アイコン名が間違っている、または存在しない

Material Symbolsには3,000種類以上のアイコンがありますが、アイコン名の表記揺れに注意が必要です。たとえば「shopping_cart」と「shopping-cart」は別物として扱われ、後者は存在しないため豆腐文字になります。

正しいアイコン名の調べ方

Google FontsのMaterial Symbols検索ページ(fonts.google.com/icons)で目的のアイコンを検索し、表示される正式名(アンダースコア区切りの英小文字)をコピーします。コピーボタンが用意されているので、これを使うのが確実です。

原因5: フォント読み込みのタイミング問題

JavaScriptで動的にHTMLを生成している場合、フォントの読み込みが完了する前にアイコン要素が描画され、一瞬豆腐文字が見えることがあります。これはFOIT(Flash of Invisible Text)やFOUT(Flash of Unstyled Text)と呼ばれる現象の一種です。

対処法: font-displayの設定

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block" rel="stylesheet">

「display=block」を指定すると、フォントが読み込まれるまでアイコン位置が空白で確保され、ロード完了後に一気に表示されます。ユーザー体験的には豆腐文字より望ましい挙動です。

対処法: フォントローダーで明示的に待つ

document.fonts.ready.then(() => {
  // フォントロード完了後にコンポーネントを描画
  renderApp();
});

FontFace APIを使えば、特定のフォントの読み込み完了を待ってから描画を開始できます。

原因6: HTTPSとHTTPの混在

HTTPSサイトでHTTPのCDN URLを参照すると、Mixed Contentとしてブラウザがブロックします。Google Fontsは現在すべてHTTPSで提供されているため、URLが「https://」で始まっていることを必ず確認してください。古いコピペコードでは「http://」のままになっていることがあります。

原因7: CSPヘッダーによるブロック

Content Security Policy(CSP)ヘッダーで外部フォントの読み込みを制限している場合、Google Fontsからのフォント取得がブロックされます。サーバー側の設定を確認し、以下のディレクティブを追加してください。

font-src 'self' https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;

ブラウザの開発者ツール(F12) → Consoleタブを開くと、CSP違反のエラーがあれば赤字で表示されます。これを見逃さずに確認することが重要です。

原因8: ブラウザ拡張機能による干渉

広告ブロッカーやプライバシー保護系の拡張機能が、Google Fontsへのリクエストをブロックすることがあります。特にuBlock Originや一部のVPN拡張は、トラッキング懸念からgoogleapis.comへのアクセスを遮断することがあります。

原因切り分けのため、シークレットモードまたは拡張機能を無効化したブラウザで動作確認してみてください。これで表示される場合は、特定の拡張機能が干渉しています。

Variable Fontパラメータの設定

Material Symbolsの真価は、Variable Font軸を活用してデザインを微調整できる点にあります。font-variation-settingsプロパティを使って、4軸を細かく制御できます。

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

各パラメータの意味

• FILL: 0(線画) / 1(塗りつぶし)
• wght(Weight): 100(極細) 〜 700(極太)
• GRAD(Grade): -25(明るい) 〜 200(濃い)
• opsz(Optical Size): 20 〜 48px(レンダリングされるサイズに最適化)

opszは、表示サイズと一致させるのが推奨です。たとえばfont-size: 32pxで表示するなら、opszも32にします。これによりサイズに最適化された見た目になります。

主なアイコン実装方法の比較

実装方法	柔軟性	パフォーマンス	難易度	対応ブラウザ
Material Icons(旧フォント)	低	中	低	広い
Material Symbols(Variable Font)	非常に高い	中(初期サイズ大)	中	モダンブラウザ
Material Symbols(SVG個別)	高	高(必要分のみ)	中	すべて
SVGスプライト	中	非常に高い	高	すべて
セルフホスト(woff2)	高	高	中	モダンブラウザ

対応ブラウザとフォールバック

Material Symbolsで使用されているVariable Fontは、Chrome 62、Firefox 62、Safari 11以降で対応しています。これより古いブラウザでは正しく表示されません。レガシーブラウザ対応が必要な場合は、JavaScriptで判定してフォールバックを表示する必要があります。

対応判定の例

if (CSS.supports('font-variation-settings', '"wght" 400')) {
  // Variable Font対応
} else {
  // フォールバック: 旧Material Iconsを読み込む
  loadFallbackIcons();
}

セルフホスティングによる高速化

Google Fontsへの外部リクエストを減らしたい場合は、フォントファイルをセルフホストすることもできます。GitHubのGoogle Fontsリポジトリからmaterial-symbols-outlined.woff2をダウンロードし、自サイトに配置します。

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2-variations');
}

セルフホストにすることでCSPの設定が単純化され、外部依存が減ります。一方で、Googleがフォントを更新したときに自動追従はできなくなる点には注意してください。

Reactでの実装例

React環境で使う場合は、専用のコンポーネントを作っておくと管理しやすくなります。

const MaterialIcon = ({ name, size = 24, fill = false, weight = 400 }) => {
  return (
    <span
      className="material-symbols-outlined"
      style={{
        fontSize: size,
        fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'opsz' ${size}`
      }}
    >
      {name}
    </span>
  );
};

// 使用例
<MaterialIcon name="home" size={32} fill={true} weight={500} />

これで、サイズや塗りつぶし、ウェイトを変えながら一貫したアイコン実装が可能になります。

よくある質問

Q1. アイコンが表示されず、文字列「home」がそのまま見えます

ligature機能が動作していない典型的な症状です。CSSの「-webkit-font-feature-settings: ‘liga’;」と「letter-spacing: normal;」が指定されているか確認してください。また、フォントファミリー名がCSS、HTMLの双方で完全一致している必要があります。

Q2. 一部のアイコンだけ表示されません

そのアイコン名が正確かを再確認してください。Google FontsのMaterial Symbols検索ページから正式名をコピーするのが確実です。スペースをアンダースコアに置き換える、すべて小文字にするなどのルールを守ってください。

Q3. 太字や細字を試したいのですが効きません

font-weightだけでは効果がない場合があります。font-variation-settingsで明示的に「wght」軸を指定する必要があります。また、CDN URLでwght軸のレンジを含めて読み込んでいるかも確認してください。「@20..48,100..700」のような指定です。

Q4. ローカルでは表示されるが本番では豆腐になります

本番環境のCSPヘッダー、HTTPS化、CDNキャッシュなどを確認してください。ブラウザの開発者ツールでネットワークタブを開き、フォントファイル(woff2)が正しくロードされているかを直接見るのが早道です。404やCORSエラーがあれば原因が特定できます。

Q5. 旧Material Iconsから移行したいです

段階的な移行が推奨です。まず、新クラスと旧クラスを共存させ、コンポーネント単位で置き換えていきます。アイコン名は基本的に同じなので、クラス名のリプレイス + CSS追加で完了するケースが多いです。ただし、一部のアイコンは新版で名称が変更されているので、表示確認が必要です。

Q6. パフォーマンスへの影響が心配です

Variable Fontファイルは初期サイズが大きい(150〜250KB)ため、大量のアイコンを使うサイトでは、必要な軸とウェイトレンジに絞ってリクエストする工夫が重要です。あるいは、表示するアイコンが10種類以下と少ない場合は、SVG個別出力に切り替えたほうが軽量になります。

まとめ

Material Symbolsで豆腐文字が出る問題は、Variable Fontの仕組みとligature機能を正しく理解していないことが主な原因です。CDN URLの選定、CSSプロパティの完全な指定、クラス名の正確な記述、対応ブラウザの確認、CSPやセキュリティ拡張による干渉のチェックを順に行えば、ほぼすべてのケースで解決できます。

正しく実装できれば、Material Symbolsは従来のアイコンフォントよりはるかに表現力豊かなアイコン体験を提供できます。FillやWeight、Optical Sizeをデザインに合わせて細かく調整できるため、ブランドのトーン&マナーに合致したUIを構築可能です。本記事の手順を参考に、確実に動くMaterial Symbols環境を整えてください。