It’s been about three weeks since our latest Webix release. We are very happy to have received so much feedback from our users. Among messages and comments there are questions concerning migration to Webix 6.0, and one of the popular issues is still the “Where have all the icons gone?” question. That is why I decided to deal with this issue individually and share the salvation guide.
They Just Disappeared
It must be quite disastrous to update your projects to the latest version and suddenly realise that some buttons have disappeared. Our team faced the same problem when it came to maintaining old samples and demos. Looks truly buggy if you don’t know why this has happened.
Why All the Trouble with Icons
Font Awesome icons are no longer bundled as a part of the pack. The benefits for this are significant:
- now you can choose any icon set you want, while before Webix 6.0 you had to use some specific version of Font Awesome, which was not always the latest one;
- the size of Webix package is reduced as by default it has only those icons that are used by widgets.
If you were using custom icons syntax which was introduced in Webix 5.3, well… I am very sorry, but we have discarded webix_skin_icon as well, because it wasn’t sufficient for all the problems.
Icons, Come Back!
However frightening the result seems to look, the solution is very simple and includes options depending on what you want.
Return Font Awesome Icons
If you are quite happy with the Font Awesome icon set and just want all the icons back, follow these steps:
- Include the Font Awesome stylesheet into your html page:
- Find all icons in your code and add fas fa- to their names (or far fa- and any other available prefix).
Have a look, I’ve done the same with the demo and it works.
Use Material Design Icons
If all this time you didn’t really like Font Awesome and were dreaming about the support of other icons, e.g. Material design, follow these steps:
- Include the Material Design Icons stylesheet into your html page:
- Find all icons in your code and add mdi mdi- to their names. If the icons are still missing somewhere, make sure the name exists in the set.
Here is how the demo looks with this icon set.
Just Do It
So, guys, the problem of disappearing icons is solved and all of you can enjoy new Webix without experiencing the shock of finding out that there are no icons. We are very sympathetic with you and are very sorry for the mess that the breaking change with icons has caused. This was the optimal answer to the fact that you may need to use different icon sets, and the change was not in vain.
There is also the article about icons in our docs, which you can visit for a more detailed instruction.
What’s Next
If you are done with the icons, please consider another breaking change that is not so obvious. The source JS files have been renamed, and if you don’t do anything about it, your production app will load the bigger JS file with all the debugging stuff like ominous error popups and warnings.
Follow these steps:
- in all your production apps, use webix.min.js instead of webix.js;
- during development, you can use any file, while we recommend to use webix.js.
To learn how to work with the debugging version, read this article in our blog.
