Moving to Material Design Icons


I recently decided to move from Linea SVG Icons to Material Design Icons. We sometimes make bad decisions when starting a new product and I think this choice was one of them. Hopefully, we are just beginning the beta and it is still easy to change without to have to worry about compatibility with previous versions.

Why changing to Material Design Icons?

While the final result using Linea is more than acceptable, I was tempted to go further. There were multiple reasons to do that and they were not only technical.

A change of icon library…

More Icons

Linea has about 700 icons which are a lot. Unfortunately, while some categories like weather are well represented, I too often found situations where no icon can illustrate a situation. Material Design Icons provides thousands of icons for almost all possible contexts. Besides, we can also find third party contributions that are adding even more icons with the same consistent style.

Material Design Icons are also well maintained and come in multiple variants (outlined, rounded, two tones,…). Even if version 1.0 will only provide support for filled ones, it will be easy to add the other styles shortly.

… and a change of format

Moving to Material Design Icons will also mean to move from SVG to icon font.

I can see several benefits:

  • Internally, Slideas uses the woff2 format with is very compact: The whole filled icon set is less than 62kB in this format, which is, I think amazing. With Linea, we had hundreds of small individual SVG files. Even if the performance gain will be small, it will exist and it is always good to have.
  • Previewing icons is also easier. Instead of having to render an SVG, we just need to have a Label component. In means for instance, that I will be able to add icons preview in completion, without the need to add a new third party dependency.

What does not change

We will still have the same capabilities:

  • Ability to have a pixel-perfect result: Fonts are factor-based and will produce the same result than SVG.
  • Ability to style them using CSS. There is almost no change in theming support.
  • Syntax: The only change will be the prefix that will move from si_ (Svg Icons) to mi_ (Material Icons)

Material Icons will be supported since the next beta (0.9.2)