Integrate material design icons on ionic 3

Ionic Framework ionic-v3
1

I leave it here for anybody who need it.

library : https://materialdesignicons.com/

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(chalk.green('\n***********************************************'));
console.log(chalk.green('\nCopy Custom Assets'));
console.log(chalk.green('\n***********************************************'));

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
2

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.