angularjs - 使い方角材で？

Question

これが機能していないため、マテリアルのアイコンをどのように使用するのか疑問に思っていました:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

アイコン属性へのパラメータとして指定されたパスに問題があると思います。このアイコン フォルダが実際にどこにあるのか知りたいのですが。

Answer 1

今日の最も簡単な方法は、たとえば HTML ヘッダー タグで、Google フォントから Material Icons フォントをリクエストすることです。

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

またはスタイルシートで：

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

次に、 md-icon ディレクティブで説明されているように、合字付きのフォント アイコンとして使用します。例えば：

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

アイコン/合字の完全なリストは、https://www.google.com/design/icons/にあります。

Answer 2

最新のリリースには、というディレクティブがありますmd-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Answer 3

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

ソース: https://material.angularjs.org/#/demo/material.components.button

Answer 4

同様の
使用により、cssとフォントの同じ場所を使用します

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}