Integrate material design icons on ionic 3

I leave it here for anybody who need it.

library :

how to integrate :slight_smile:

npm install @mdi/font

create file : config/copy.config.js

var chalk = require("chalk");
const config = require('../node_modules/@ionic/app-scripts/config/copy.config');

console.log('\nCopy Custom Assets'));

module.exports = Object.assign(config, {
  copyMdi: {
    src: ['{{ROOT}}/node_modules/@mdi/font/**/*'],
    dest: '{{WWW}}/assets/fonts/mdi'

add on config section on package.json

"config": {
    "ionic_copy": "./config/copy.config.js"

add on variables.scss

@import "../assets/fonts/mdi/css/materialdesignicons.css";

How to use the icon

<span class="mdi mdi-home"></span>

Enjoy :slight_smile:

1 Like

Does this tree-shake, or does anybody following this advice end up with a boatload of unused icons bloating up their app binary? I remember running into that problem with old versions of FontAwesome.