Значки веб-шрифтов AngularJS (<md-icon>) не отображаются?

Не уверен, что это документация, которая меня сбивает с толку, но у меня возникают трудности с работой md-icons (это больше, чем другие шрифты значков). Инструкции здесь указывают на использование <md-icon md-font-icon="classname" />.

Вот пример demo с загруженной таблицей стилей шрифта значка и <md-icon md-font-icon="android" /> в соответствии с инструкциями по документации, однако ничего не отображается. Что я делаю неправильно?

Ответ 1

Я также пытаюсь получить иконы, чтобы показать их, поэтому вот что я сделал:

Добавьте в голову 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>

Ответ 2

У меня была такая же проблема, как у вас, и я мог использовать ее только с <i class="material-icons">android</i>, пока не выяснил, что у меня была более старая версия материала angular.

Я использовал CDN Google, но у них не было последней версии. Вам необходимо загрузить его с веб-сайта angular (или обновления с помощью npm) и ссылки на локальный исходный код.

теперь я могу использовать его с

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

Ответ 3

Вы можете просто использовать:

<md-icon>android</md-icon>

что все, здесь пример

Ответ 4

Изменить: этот ответ предназначен для Angular, а не для 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).

Ответ 5

Использование md-значков с помощью шрифтов google:

: <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">

Ответ 6

Если вы предпочитаете использовать имена классов 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

Ответ 7

Я использовал 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 совпадают одинаково внутри кнопки.

Ответ 8

Чтобы использовать md-icons, нам нужно будет включить стиль значка материала в index.html

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" 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>