2.0.0 • Public • Published


Build Status dependencies Status npm version contributions welcome

This project was created to avoid refactoring the usage of ligatures with material-design-icons, in a React application where older browser support is required.

So here is a simple Webpack loader that will target your icons and replace them with the equivalent HTML entities provided by google's Material Design Icons.

By using the material-design-icons package and referencing the codepoints file, we can map all ligature instances to HTML entity values.

This is v2 with Webpack@4 support.
For Webpack@2 support please use v1.

<i className="material-icons">face</i>   -->   <i className="material-icons">&#xf20e;</i>


Install as a dev dependency via npm.

$ npm install ligature-to-html-entity@2 --save-dev

When inserting this loader into your Webpack configuration, make sure to place it last in the list (as below).

// webpack.config.js
rules: [
    test: /\.js$/,<!-- ligature-to-html-entity -->
    exclude: path.resolve(__dirname, '../', 'node_modules'),
    use: [
        loader: 'babel-loader',
        options: {
          "presets": ["@babel/preset-env", "@babel/preset-react"]
        loader: 'ligature-to-html-entity',  // <--- insert here, last loader in the list

Default usage

This is the result if run with no query params, targeting the typical material-icons element markup.

<i className="material-icons">face</i>  <!-- becomes  -->  <i className="material-icons">&#xf20e;</i>

Custom query

You can add the tag and attr as a query params. In this example we are setting the tag to md-icon and omitting the attribute by using a minus char.

# 'ligature-to-html-entity?tag=md-icon&-attr
<md-icon>face</md-icon>   -->   <md-icon>&#xf20e;</md-icon>


Query Default value Description example
tag i DOM element tag to target ?tag=md-icon
attr material-icons Element attribute value to target ?-attr (false), ?attr=material-icons
debug false Print affected element details to the console ?debug (true)


Contributing is very much welcome! Get setup by downloading all dependencies.

$ npm install

You can run the example Webpack config output using

$ npm run example-webpack

You can turn debugging on in your webpack config by adding debug as a query param.

{ loader: 'ligature-to-html-entity?debug' }

Unit tests are being written using TAPE and Expect which can be run from npm.

$ npm test

Package Sidebar


npm i ligature-to-html-entity

Weekly Downloads






Unpacked Size

15.7 kB

Total Files


Last publish


  • sam7r