web-dev-qa-db-ja.com

素材アイコンをオフラインでホストする方法は？

これは非常に単純な質問ですが、Googleマテリアルアイコンをどのように使用しますか？

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

？

ユーザーがインターネットに接続していない場合でも、アプリにアイコンを表示できるようにしたい

javascripthtml5cordovamaterialize
77
Luke Tan

方法2.セルフホスティング開発者ガイド

ダウンロード githubからの最新リリース（アセット：Zipファイル）、解凍し、マテリアルデザインアイコンファイルを含むiconfontフォルダーをローカルプロジェクトにコピーします- https：// github .com/google/material-design-icons/releases

アーカイブから iconfont フォルダーのみを使用する必要があります。これには、さまざまな形式のアイコンフォント（複数ブラウザーサポート用）および定型cssが含まれています。

  • @ font-faceのurl属性のソースを、ローカルプロジェクトのiconfontフォルダーへの相対パス（フォントファイルがある場所）に置き換えます。 url（ "iconfont/MaterialIcons-Regular.ttf"）
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.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';
}

<i class="material-icons">face</i>

NPM/Bowerパッケージ

Googleには公式にBowerとNPMの依存関係オプションがあります-マテリアルアイコンガイドに従ってください 1

bowerを使用する

bower install material-design-icons --save

NPMの使用

npm install material-design-icons --save

79
bfmags

私はAngular 4/5向けに構築しており、多くの場合オフラインで作業しているため、次のことがうまくいきました。最初にNPMをインストールします。

npm install material-design-icons --save

次に、以下をstyles.cssに追加します。

@import '~material-design-icons/iconfont/material-icons.css';
22
Richard Bown

Webpackプロジェクトを使用する場合、後

npm install material-design-icons --save

あなたはただする必要があります

import materialIcons from 'material-design-icons/iconfont/material-icons.css'
16
Vladislav Kosovskikh

上のアプローチは私にはうまくいきません。 githubからファイルをダウンロードしましたが、ブラウザーがフォントをロードしませんでした。

私がしたことは、素材アイコンのソースリンクを開くことでした。

https://fonts.googleapis.com/icon?family=Material+Icons

私はこのマークアップを見ました：

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

WoffフォントのURLリンクを開きますhttps://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

woff2ファイルをダウンロードします。

次に、woff2ファイルパスをmaterial-icons.cssの新しいパスに置き換えます

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

それは私のために物事が機能します。

15
Kaloyan Stamatov

これは簡単な解決策かもしれません

これを入手してください リポジトリ これは 元のリポジトリ のフォークですGoogleが公開しています。

Bowerまたはnpmでインストールします

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

HTMLページにcssファイルをインポートします

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

または

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

テスト：HTMLファイルのbodyタグ内にアイコンを追加します

<i class="material-icons">face</i>

顔アイコンが表示されていれば、問題ありません。

動作しない場合は、この..をプレフィックスとしてnode_modulesパスに追加してみてください。

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
9
Md. Harun Or Rashid

私のレシピには3つのステップがあります。

  1. material-design-iconsパッケージをインストールする

    npm install material-design-icons

  2. material-icons.cssファイルを.lessまたは.scss file /プロジェクトにインポートするには

    @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

  3. 推奨コードをreactjs .jsファイル/プロジェクトに含める

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>
7
Roman

私の答えでは、セルフホスティングのアイコンのために行う必要があるすべてをコンパイルしようとしました。これらの4つの簡単な手順に従う必要があります。

  1. マテリアライズリポジトリのiconfontフォルダーを開きます

    リンク-[ https://github.com/google/material-design-icons/tree/master/iconfont]

  2. これらの3つのアイコンファイルをダウンロードする->

    MaterialIcons-Regular.woff2-format（ 'woff2'）

    MaterialIcons-Regular.woff-format（ 'woff'）

    MaterialIcons-Regular.ttf-format（ 'truetype'）;

    注-ダウンロード後、名前を好きな名前に変更できます。

  3. 次に、CSSに移動して、このコードを追加します

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.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';
}

注：src：url（...）で提供されるアドレスは、index.htmlファイルではなく、「CSSファイル」に関するものでなければなりません。たとえば、src：url（../ myicons/MaterialIcons-Regular.woff2）

  1. これで、使用する準備ができました。ここで、HTMLでの実行方法を示します。
<i class="material-icons">face</i>

here をクリックして、使用可能なすべてのアイコンを表示します。

3
Abhinav1602

npm install material-design-iconsを完了したら、これをメインCSSファイルに追加します。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.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';
}
2
Manolo Alvarez

質問のタイトルは、Hostマテリアルアイコンをオフラインにする方法を尋ねますが、本文では、目的がuse材料アイコンをオフライン（強調鉱山）。

マテリアルアイコンファイルの独自のコピーを使用することは、有効なアプローチ/実装です。別の方法として、 service worker を使用できるのは、サービスワーカーに処理を任せることです。そうすれば、コピーを取得して最新の状態に保つ手間がなくなります。

たとえば、 Workbox を使用してサービスワーカーを生成し、workbox-cliを実行してデフォルトを受け入れるという最も単純なアプローチを使用し、生成されたサービスワーカーに次のテキストを追加します。

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

次に、[F12]> [アプリケーション]> [ストレージ]> [IndexedDB]を使用してChromeにキャッシュされていることを確認し、名前にgoogleapisが含まれるエントリを探します。

2
Joseph Simpson

material-design-icons-iconfont を使用します

完全な開示、私はこのパッケージの著者です

Googleの material-design-icons プロジェクトは、メンテナンスが少ないおよび古いwhile。 https://material.io/icons/ のバージョンと material-design-icons のバージョンの間にはギャップがあります。

material-design-icons-iconfont を作成して、これらの主要な問題に対処しました。

  • material-design-icons jams npm install-すべての無関係なsvg/xml/...ファイルが削除されました
  • フォントファイルは、常にGoogle Fonts CDNから常に最新の状態です。
  • Scssのサポート

npm経由でインストール

npm install material-design-icons-iconfont --save

Webアプリケーションのパック方法（webpack/gulp/bower/...）によって異なります。.css/.scssファイルをインポートする必要があります（および相対フォントパスを変更する場合があります）

SCSSを使用したインポート

Sassファイルの1つをインポートする

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

後で、目的のアイコン<i class="material-icons"> + icon-id + </i>を参照します

<i class="material-icons">contact_support</i>

デモページ

軽い デモページ が付属しており、フォントの検索とコピーペーストを支援します。

image

2
Jossef Harush

http://materialize.com/icons.html ページに含めるスタイルヘッダー情報では、実際のハイパーリンクに移動し、ローカライズされたコピーを作成してアイコンをオフラインで使用できます。

NB：2つのファイルをすべてダウンロードしますicon.cssおよびsomefile.woff。

  1. ヘッダーで必要に応じて次のURLに移動します

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">。

ページをwhatever_filename.cssとして保存します。デフォルトはicon.css

  1. このような行を探します

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

  1. .woffで終わるURLにアクセスします

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2。ブラウザが自動的にダウンロードします。 CSSフォルダーに保存します。

  1. これで、2つのファイルicon.cssと2fcrYFNa .... mY.wof22、両方をcssに保存します。 cssヘッダーの場所を編集して、ディレクトリのicon.cssを編集します。 .woff2ファイルが常にicon.cssと同じフォルダーにあることを確認してください。長いファイル名は自由に編集してください。

1
Joseph Quaye

angular cliを使用

npm install angular-material-icons --save

または

npm install material-design-icons-iconfont --save

material-design-icons-iconfontは、アイコンの最新の更新バージョンです。 angle-material-iconsは長時間更新されません

インストールが完了するのを待ってから、angular.json-> projects-> architect-> stylesに追加します

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

またはmaterial-desing-icons-iconfontをインストールした場合

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],
1
Wlada

2019更新はこちら：

マテリアルアイコン、通常のアイコン、丸みを帯びた、シャープ、すべてのバリエーションを自己ホストします。このレポジトリから入手してください： https://github.com/petergng/material-icon-font

何らかの理由で、これらのフォントがGoogleリポジトリから簡単にアクセスできない理由がわかりません。

しかし、ここに行きます。

パッケージをダウンロードした後、binフォルダーに移動すると、4つのバリアントが表示されます。もちろん、どちらを使用するかはあなた次第です。

これらを使用するには、cssファイルを作成し、1必要なバリアントごとにフォントフェースを生成します。

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

urlは、プロジェクト内のアイコンの場所にリンクします。

  1. 次に、アイコンクラスを登録します。

    .material-icons-outlined, .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; }

これにより、.material-icons-outlined,クラスと.material-iconsクラスの両方で同じデフォルトが使用されます。 .material-icons-sharpを使用する場合は、2つのクラス名に追加します。

  1. 最後に、手順1で取得したフォントフェースをプラグインします。

    .material-icons { font-family: 'Material Icons'; }

    .material-icons-outlined { font-family: 'Material Icons Outline'; }

繰り返しますが、シャープなどのより多くのバリアントを使用するには、上記の2つのようなブロックを追加します。

完了したら、HTMLに移動して、新しく作成したアイコンを使用します。

<i class="material-icons-outlined">hourglass_empty</i>

<i class="material-icons">phone</i>

0
Wale

カロヤン・スタマトフ法が最適です。最初に https://fonts.googleapis.com/icon?family=Material+Icons に移動します。 cssファイルをコピーします。コンテンツは次のようになります

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

フォントのソースをブラウザに貼り付けてwoff2ファイルをダウンロードします https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 次に、元のソース。必要に応じて名前を変更できますgithubから60MBのファイルをダウンロードする必要はありません。

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(materialIcon.woff2) format('woff2');

}

 .material-icons {
    font-family: 'Material Icons';
    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;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
  }

materialIcon.woff2はダウンロードおよび置換されたwoff2ファイルです。

0
chris_wire