GrapesJS Google Material Icons Plugin

Icons are usually added to a page the slow way: find the name in a reference, copy the ligature, paste it into markup, reload to see whether it was the right one. This plugin puts a picker in the editor — double-click an icon on the canvas and choose its replacement from a dialog.

How to use it

Drag the block onto the canvas, then double-click the icon it contains. A dialog opens listing the Google Material icons, and selecting one replaces the icon in place.

Required setup

The plugin renders icons with the Material Symbols font, so that font must be loaded in the page you publish, not only in the editor. Add at least one of the three families — Outlined, Rounded or Sharp — from Google Fonts to your output. Without it the icons fall back to their ligature names as plain text.

Current scope

The plugin works with the Material Symbols icon font. The author lists SVG icon support as planned rather than shipped, which is worth knowing if your build cannot load an external font.

Good to know

Install as grapesjs-google-material-icons and register it under the name gjs-google-material-icons. MIT licensed.