web-dev-qa-db-fra.com

Les icônes de police Web AngularJS Matériel (<md-icon>) ne s'affichent pas?

Je ne sais pas si c'est la documentation qui me déroute, mais j'ai des difficultés à faire fonctionner md-icons (c'est plus de travail que d'autres polices à icônes). Instructions ici spécifiez pour utiliser <md-icon md-font-icon="classname" />.

Voici un exemple demo avec la feuille de style de la police chargée et un <md-icon md-font-icon="Android" /> selon les instructions de la documentation, mais rien ne s'affiche. Qu'est-ce que je fais mal?

cssangularjsgoogle-webfonts
19
Helen Che

J'ai également du mal à faire en sorte que les icônes apparaissent également. Voici ce que j'ai fini par faire:

Ajoutez à la tête de votre code HTML ce qui suit

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

puis ajoutez votre icône en utilisant ce qui suit: 

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

vous pouvez aussi l'utiliser dans un bouton md comme suit:

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

Je viens d'avoir le même problème que vous et je ne pouvais l'utiliser qu'avec <i class="material-icons">Android</i> jusqu'à ce que je sache que j'avais une version plus ancienne du matériel angulaire.

J'ai utilisé le CDN de Google mais ils ne possédaient pas la version la plus récente . Vous devez le télécharger à partir du site Angular Material (ou mettre à jour avec npm) et le lier au code source local.

maintenant je peux l'utiliser avec

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

Vous pouvez simplement utiliser:

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

c'est tout, voici exemple

12
Andrei Kropotin

Edit: Cette réponse est pour Angular, pas AngularJS (post originalement dit Angular). Laissant cela pour n'importe qui perdu.

Comme aucune des autres réponses ne mentionne que vous devez inclure la variable MdIconModule, je le ferai. Facile à oublier.

<i class="material-icons">icon_name</i> fonctionnera aussi longtemps que les instructions figurant sur https://google.github.io/material-design-icons/ seront suivies.

Pour que <md-icon>icon_name</md-icon> fonctionne, vous devez également

  • import { MdIconModule } from '@angular/material' dans votre AppModule et 
  • listez MdIconModule parmi vos AppModule 's imports

(ou créez un module séparé pour gérer le chargement des modules de matériau angulaire, comme décrit à https://material.angular.io/guide/getting-started ).

3
Mikal Madsen

Utilisation de md-icons avec les polices google:

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

Les dépendances 

<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

Si vous préférez utiliser des noms de classe CSS au lieu de ligatures (car vous ne voulez pas que les lecteurs d'écran lisent le nom de l'icône), il semble que vous deviez ajouter votre propre 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';
  }
  ...
}

Ensuite, vous pouvez l'utiliser comme ceci:

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

Pour une liste complète des codes d'icônes: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

1
Nicholas Albion

J'ai utilisé 4 approches, dont 3 mentionnées sur cette page:

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

L'icône numéro 1 disparaît lors de la mise à jour d'un autre composant. Et seulement les chiffres 2 et 3 alignés à l’intérieur du bouton .  enter image description here

0
Vadim

Pour utiliser md-icons, nous devrons inclure le style d'icône de matériau dans index.html

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

commencez ensuite à utiliser des icônes avec n'importe quel élément HTML valide ou avec <md-icon>, juste pour être sûr que class="material-icons est ce qui rend cela possible et important pour obtenir les icônes.

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