I'm using the buttons method to add more paragraphs and am styling the buttons via css in a custom module. I'm setting paragraph icons as background images for each button so an editor can visually see what they will be adding with each button.

I can accomplish this via css by using:

input.button.field-add-more-submit[value="Add My Great Paragraph"]{
  background-image: //my icon

but am looking for a more bulletproof way to styles these buttons than the value. I'd like to add the paragraph bundle type machine name to the input as a class (in case the label of the paragraph type changes down the road).

I can access the paragraphs field widget by using a widget form alter but haven't been able to get to the buttons from there.

function my_custom_module_field_widget_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) {
  $field_definition = $context['items']->getFieldDefinition();
  if ($field_definition->getType() == 'entity_reference_revisions') {
    //can access the paragraphs field here but not the buttons

Any ideas would be helpful, thanks.

  • Can't we already configure icons for paragraph types from the UI? #2830016
    – leymannx
    Oct 24, 2019 at 19:09
  • @leymannx - Yes we can, but they are a mix of config and content (content for the image file and config for the file attachment to the paragraph)—which is completely usable, but a pain for spinning up multiple sites from a canonical upstream. That also does not solve the issue of getting the icons on the paragraphs add-buttons. Oct 25, 2019 at 20:18


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.