How to use the mdi icons in Ionic 4? https://materialdesignicons.com/
Ionic 4 its icons uses svg. Is it possible to use the mdi icons adapted to the Ionic icon component? In best case in the same format (svg). Or does this have to be a separate element?
In Vue I just have to set the prefix mdi-
to use these icons.
Damn, I already knew it. Anyway here’s my solution:
- Open
angular.json
and add toapp/architect/build/options/assets
{
"glob": "**/*.svg",
"input": "src/assets/custom-ion-icons",
"output": "./svg"
}
-
Download the svg you want as icon and place it to the path you set above. (custom-ion-icons)
Name the svg files e.g.md-custom-foobar.svg
(Android) orios-custom-foobar.svg
(iOS). The prefix is important. -
Use the icons. with the prefix
custom-
.
<ion-icon name="custom-foobar"></ion-icon>
With this solution you can use any svg as icon using the official Ionic ion-icon
component.
You could also separate your icons and create several prefixes e.g. mdi-