Skip to content

Latest commit

 

History

History
83 lines (54 loc) · 2.99 KB

README.md

File metadata and controls

83 lines (54 loc) · 2.99 KB
Raw

MaterialDings

MaterialDings is a modernized replacement for the Wingdings font. Each glyph has been replaced with a simple, modern, and friendly icon in accordance with Material Design guidelines.

Sample of MaterialDings Glyphs

Installing

Install MaterialDings with npm or yarn:

npm install -s @pictogrammers/materialdings
yarn add @pictogrammers/materialdings

Usage

There are stylesheets available for CSS, SCSS, and LESS included in the package.

  • dist/MaterialDings.css
  • dist/MaterialDings.scss
  • dist/MaterialDings.less

You may also directly import the fonts. The font is available in WOFF2, WOFF, TTF, and SVG formats.

  • dist/fonts/MaterialDings.woff2
  • dist/fonts/MaterialDings.woff
  • dist/fonts/MaterialDings.ttf
  • dist/fonts/MaterialDings.svg

Building Your Own Variations

The entirety of this font is built off of SVG path data. Most of the icons come directly from the Material Design Icons library via @mdi/js. However, there are some icons that are not included in that library for various reasons. To handle these cases, there is a place where you can specify your own icon path data.

Icon Definitions

  • To use an icon from the MDI library, reference the icon in the definition.json file with the mdi: prefix and then use the name of the icon in pascal case. For example, if you wanted to use the account-multiple-outline icon, you would specify mdi:AccountMultipleOutline in the icon definition for the appropriate Unicode value.

  • To use a custom icon, copy the path data to the assets/icons.mjs file with a unique variable name that begins with svg. Then reference that new icon in the definitions.json file with the svg: prefix. For example, if you named your new icon svgMyNewAwesomeIcon, you would specify svg:MyNewAwesomeIcon in the icon definition for the appropriate Unicode value.

Examples:

  "\u0021": { "icon": "mdi:Pencil" },
  "\u0022": { "icon": "svg:MyCustomIcon" },

Icon Transformations

You can also apply transformations to icons in the definitions.json file. To do this, add a transform array to the Unicode definition.

  "\u00CD": {
    "icon": "mdi:Leaf",
    "transform": [
      { "type": "rotate", "value": 90 },
      { "type": "flip", "value": "horizontal" },
      { "type": "scale", "value": 0.5 }
    ]
  },

The available transformations include:

  • rotate [Integer]: The angle to rotate the glyph
  • flip [Enum: horizontal, vertical, both]: The direction to flip the glyph
  • scale [Float]: The multiplier to scale the glyph

License

The font and glyphs are licensed under the Apache 2.0 License.

This package is licensed under MIT.

Please see the LICENSE file for more detailed license information.