web-dev-qa-db-ja.com

AngularJS Material Webフォントアイコン（<md-icon>）が表示されませんか？

紛らわしいのはドキュメントなのかわかりませんが、md-icons動作します（他のアイコンフォントよりも動作します）。手順 here Use <md-icon md-font-icon="classname" />。

以下にサンプルを示します demo アイコンフォントスタイルシートがロードされ、<md-icon md-font-icon="Android" />ドキュメントの指示によると、何も表示されません。私は何を間違えていますか？

cssangularjsgoogle-webfonts
19
Helen Che

私もアイコンを表示するように努力していますので、ここで私がやったことです：

HTMLの先頭に次を追加します

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

次に、次を使用してアイコンを追加します。

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

次のようにmdボタン内で使用することもできます。

<md-button class="md-icon-button" ng-click="someFunc()">
    <i class="material-icons">Android</i>
</md-button>
30
Ovi

私はあなたと同じ問題を抱えており、<i class="material-icons">Android</i> angular material。

GoogleのCDNを使用しましたが、最新バージョンがありませんでした。 angularマテリアルサイト（またはnpmで更新）からダウンロードし、ローカルソースコードにリンクする必要があります。

今、私はそれを使用することができます

<md-icon md-font-set="material-icons">delete</md-icon>
23
Stefan

あなただけを使用することができます：

<md-icon>Android</md-icon>

それだけです、ここに 例

13
Andrei Kropotin

編集：この答えはAngularJS向けではなくAngularJS向けです（元はAngularが言っていました）。失われた人のためにこれを残してください。

他の回答にはMdIconModuleを含める必要があると言及されていないため、説明します。忘れやすい。

<i class="material-icons">icon_name</i>は、 https://google.github.io/material-design-icons/ の指示に従っている限り機能します。

取得するため <md-icon>icon_name</md-icon>動作するには、またする必要があります

  • import { MdIconModule } from '@angular/material'をAppModuleに、そして
  • MdIconModuleのAppModuleの中からimportsをリストします

（またはAngular Materialモジュール、 https://material.angular.io/guide/getting-started で説明されているように）のロードを処理する別のモジュールを作成します。

3
Mikal Madsen

Googleフォントでのmd-iconsの使用：

：<md-icon md-font-set="material-icons"> Android </md-icon>

依存関係

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

 <link href="https://material.angularjs.org/latest/angular-material.min.css" rel="stylesheet">
1
Mahesh K

合字の代わりにCSSクラス名を使用したい場合（スクリーンリーダーにアイコンの名前を読み取らせたくないため）、独自のCSSを追加する必要があるようです。

.material-icons {
  // This bit is included when you import
  // https://fonts.googleapis.com/icon?family=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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  // ...but you need to add your own CSS class names for the icons you want to use:
  &.arrow-backward::before {
    content: '\e5c4';
  }
  &.arrow-forward::before {
    content: '\e5c8';
  }
  ...
}

その後、次のように使用できます。

<md-button>
   Next
   <i class="material-icons right arrow-forward"></i>
</md-button>

アイコンコードの完全なリスト： https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

1
Nicholas Albion

私は4つのアプローチを使用しましたが、そのうち3つはこのページで言及しました。

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <ng-md-icon icon="perm_identity"></ng-md-icon>
    </md-button>

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <md-icon md-font-set="material-icons">perm_identity</md-icon>
    </md-button>

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <md-icon>perm_identity</md-icon>
    </md-button>

    <md-button class="md-icon-button" ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <i class="material-icons">perm_identity</i>
    </md-button>

番号1のアイコンは、別のコンポーネントの更新で消えます。そして、ボタン内で番号2と3だけが同じように並んでいます。 enter image description here

0
Vadim

md-iconsを使用するには、index.htmlにマテリアルアイコンスタイルを含める必要があります。

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

次に、有効なhtml要素または<md-icon>でアイコンの使用を開始します。class="material-iconsがアイコンを取得するためにこれを可能にし、重要にするものであることを確認してください。

<md-icon class="material-icons">delete</md-icon>
<i class="material-icons">delete</i>
<span class="material-icons">delete</span>
0
MGA