Búsqueda de sitios web

angular - ¿Iconos personalizados con Ionic 5?

Recientemente actualicé de Ionic 4 a Ionic 5. Con Ionic 5, los iconos también recibieron una actualización. Sin embargo, al parecer, también cambió el mecanismo que carga los iconos.

En Ionic 4 era posible agregar íconos personalizados así: Ionic 4: Íconos personalizados hechos simples

Agrega por ejemplo ios-my-custom-icon.svg y md-my-custom-icon.svg en una carpeta icon dentro de assets. Luego era necesario referenciarlos en el angular.json así:

"assets": [
  {
    "glob": "**/*.svg",
    "input": "src/assets/icon",
    "output": "./svg"
  }
]

y finalmente uno podría llamarlos como los otros íconos de ion en HTML:

<ion-icon name="my-custom-icon"></ion-icon>

Sin embargo, esto ya no funciona en Ionic 5. ¿Alguien sabe cómo podemos implementar ahora iconos personalizados en Ionic 5?

EDITAR: Me di cuenta de que todavía es posible llamarlos a través del atributo src como

<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>

Sin embargo, eso no es tan conveniente como usar el atributo name. ¿Hay alguna posibilidad de que tengamos algún equivalente a lo anterior?

Respuesta #1

Necesitas quitar el md- del nombre del ícono.

Por ejemplo, tu icono es md-my-custom-icon.svg

Cambia a my-custom-icon.svg. Después de eso, los íconos personalizados funcionarán nuevamente en Ionic 5

Salud

ACTUALIZACIÓN

Tuve que volver a poner el md- en el nombre del icono y en realidad agregar el md- a la etiqueta del icono ion como se muestra a continuación. De esta manera usa mi icono personalizado y no el predeterminado.

<ion-icon name="md-my-custom-icon"></ion-icon>

Respuesta #2

Siempre podrías usar [] y luego proporcionar una variable si lo prefieres:

const myCustomIcon = "/assets/icons/custom.svg";

Y en el marcado:

<ion-icon [src]="myCustomIcon"></ion-icon>

Artículos relacionados