css - font - ¿No aparecen los íconos de fuentes web de AngularJS Material(<md-icon>)?

material icons font download

Question

No estoy seguro de si es la documentación lo que me confunde, pero tengo dificultades para que md-icons funcione (es más trabajo que otras fuentes de iconos). Las instrucciones here especifican usar <md-icon md-font-icon="classname" /> .

Aquí hay un ejemplo de demo con la hoja de estilo de fuente del icono cargada y una <md-icon md-font-icon="android" /> según las instrucciones de la documentación, sin embargo, no se muestra nada. ¿Qué estoy haciendo mal?

Answer 1

Edición: Esta respuesta es para Angular, no AngularJS (post originalmente dicho Angular). Dejando esto para cualquiera perdido.

Como ninguna de las otras respuestas menciona que necesita incluir el MdIconModule , lo haré. Fácil de olvidar.

<i class="material-icons">icon_name</i> funcionará siempre que se sigan las instrucciones de https://google.github.io/material-design-icons/ .

Para que <md-icon>icon_name</md-icon> funcione, también debe

• import { MdIconModule } from ''@angular/material'' a su AppModule y
• MdIconModule entre las imports su AppModule

(o cree un módulo separado para manejar la carga de módulos de material angular, como se describe en https://material.angular.io/guide/getting-started ).

Answer 2

Para usar md-icons tendremos que incluir el estilo del icono de material en index.html

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

luego comience a usar iconos con cualquier elemento html válido o con <md-icon> , solo para asegurarse de que class="material-icons es lo que hace que esto sea posible e importante para obtener los iconos.

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

Answer 3

Si prefieres usar nombres de clase CSS en lugar de ligaduras (porque no quieres que los lectores de pantalla lean el nombre del ícono), parece que necesitas agregar tu propio 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'';
  }
  ...
}

Entonces puedes usarlo así:

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

Para obtener una lista completa de los códigos de iconos: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Answer 4

Simplemente tuve el mismo problema que tú y solo pude usarlo con <i class="material-icons">android</i> hasta que descubrí que tenía una versión más antigua de material angular.

Usé el CDN de google pero no tenían la versión más reciente. Debe descargarlo del sitio de material angular (o actualizarlo con npm) y vincularlo al código fuente local.

ahora puedo usarlo con

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

Answer 5

Solo puedes usar:

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

eso es todo, aquí está el example

Answer 6

También me cuesta intentar mostrar los íconos, así que esto es lo que terminé haciendo:

Agregue a la cabecera de su html lo siguiente

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

Luego agrega tu ícono usando lo siguiente:

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

También puede usarlo dentro de un botón md de la siguiente manera:

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

Answer 7

Usé 4 enfoques, 3 de ellos mencionados en esta página:

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

El icono número 1 desaparece en otra actualización de componente. Y solo los números 2 y 3 alineados de manera idéntica dentro del botón.

Answer 8

Uso de md-icons con fuentes de google:

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

Dependencias

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