Issue #1031💬 AnsweredOpened April 12, 2018by francesca-cicileo0 reactions

Custom icons

Quick answerby artf

At the moment, there is no label property on buttons so you can edit them only via className. BTW I like the idea, I'll make it available in the next release

Read full answer below ↓

Question

I want to add a custom icon to the grapesjs panel at the top of the editor page. Is it possible to do this with any SVG or with text? If so, can you explain how? I've tried the following but couldn't get an icon to show:

var pnm = editor.Panels;
pnm.addButton('options', {
  label: '<svg ... </svg>',
 ...
});

I've also tried this to use text as an icon, but couldn't get that working either:

var pnm = editor.Panels;
pnm.addButton('options', {
  label: 'words',
  className: 'fa fa-text',
 ...
});

(I'm also using the newsletter plugin).

Answers (2)

artfApril 14, 2018

At the moment, there is no label property on buttons so you can edit them only via className. BTW I like the idea, I'll make it available in the next release

lock[bot]September 17, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.