AngularJS Material web font icons () не отображается?

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

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

18
angularjs css google-webfonts

8 ответов

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

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

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

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

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

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

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

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

вот и все, вот это пример

11

Edit: этот ответ предназначен для углового, а не AngularJS (сообщение первоначально сказал угловой). Оставляю это для тех, кто потерялся.

поскольку ни один из других ответов не упоминает, что вам нужно включить 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 ' s imports

(или создайте отдельный модуль для обработки загрузки угловых модулей материала, как описано в https://material.angular.io/guide/getting-started).

3

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

использование 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">
1

я использовал 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

использовать md-icons мы должны будем включить стиль значка материала в индекс.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