【CSS】Safariでマテリアルアイコンが表示されない

iPad、iPhoneでword wrap等の指定された要素に関わる一部のGoogleマテリアルアイコンが表示されませんでした。

同ページ内の別のマテリアルアイコンが表示されているので、前後のCSS指定が関わっているのだと思います。

CSSに以下を追加したら、表示されるようになりました。

.material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;

     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;

     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;

     /* Support for IE. */
     font-feature-settings: 'liga';
}

参考サイトによると、GoogleWebFonts経由で導入するときは必ず追記してくださいということでした。

参考URL

（英語）

https://stackoverrun.com/ja/q/9937461

Googleマテリアルアイコンの導入手順

https://qiita.com/haru_tp/items/5b8cdc4cb9b7b3223465