Custom SVG icons
JabRef uses Material Design Icons for most buttons on toolbars and panels. While most required icons are available, some specific ones cannot be found in the standard set, like Vim, Emacs, etc. Although custom icons might not fit the existing icons perfectly in style and level of detail, they will fit much better into JabRef than having a color pixel icon between all Material Design Icons.
This tutorial aims to describe the process of adding missing icons created in a vector drawing tool like Adobe Illustrator and packing them into a true type font (TTF) to fit seamlessly into the JabRef framework. Already existing custom icons will be published (link is coming soon) as they need to be repacked as well.
The process consists of 5 steps:
- Download the template vector graphics from the Material Design Icons webpage. This gives you a set of existing underlying shapes that are typically used and the correct bounding boxes. You can design the missing icon based on this template and export it as an SVG file.
- Pack the set of icons into a TTF with the help of the free IcoMoon tool.
- Replace the existing
- Adapt the class
org.jabref.gui.JabRefMaterialDesignIconto include all icons.
- Adapt the class
org.jabref.gui.IconThemeto make the new icons available in JabRef
Step 1. Designing the icon
Good icon design requires years of experience and cannot be covered here. Adapting color icons with a high degree of detail to look good in the flat, one-colored setting is an even harder task. Therefore, only 3 tips: 1. Look up some tutorials on icon design, 2. reuse the provided basic shapes in the template, and 3. export your icon in the SVG format.
Step 2. Packing the icons into a font
Use the IcoMoon tool for packing the icons. Create a new set and import all icons. Rearrange them so that they have the same order as in
org.jabref.gui.JabRefMaterialDesignIcon. This will avoid that you have to change the code points for the existing glyphs. In the settings for your icon set, set the Grid to 24. This is important to get the correct spacing. The name of the font is
JabRefMaterialDesign. When your icon-set is ready, select all of them and download the font-package.
Step 3. Replace the existing
Unpack the downloaded font-package and copy the
.ttf file under
Step 4. Adapt the class
Inside the font-package will be a CSS file that specifies which icon (glyph) is at which code point. If you have ordered them correctly, you newly designed icon(s) will be at the end and you can simply append them to
TEX_STUDIO("\ue900"), TEX_MAKER("\ue901"), EMACS("\ue902"), OPEN_OFFICE("\ue903"), VIM("\ue904"), LYX("\ue905"), WINEDT("\ue906"), ARXIV("\ue907");
Step 5. Adapt the class
If you added an icon that already existed (but not as flat Material Design Icon), then you need to change the appropriate line in
org.jabref.gui.IconTheme, where the icon is assigned. If you created a new one, then you need to add a line. You can specify the icon like this: