Magento 2 Backend – How Admin Icons Font Files are Generated

adminhtmlbackendfontsmagento2

In Magento 2, the icons for backend Menu Items are Private User Area code points added via a custom font file.

The _typography.less file appears to ship with the ability to conditionally include one of five font files (.eot, .svg, .ttf, .woff, .woff2). The font file that defines these custom endpoint is named admin-icons.

What not clear is if Magento (via LESS CSS, or some other means) ships with the ability to generate these five font files, or if an extension developer is expected to create all five themselves? i.e. it's easy enough to use an Icon Generation program like IcoMoon to create a svg version of the font, but does a Magento 2 module developer also need to create eot, ttf, woff, or woff2 files themselves?

If not — how can you use Magento to generate these files from the svg.

If so — what tools do people use to create the eot, ttf, woff, or woff2 versions of the font?

Best Answer

As I assumed and as Vitalii confirmed in the comments, the IcoMoon App is used internally by Magento frontend developers to generate the custom fonts file.

The app lets you generate every possible format:

  • WOFF
  • TTF
  • EOT
  • SVG