Introduce Material Symbols

Thanks for implementing this.

You probably know the icons don't preview yet in the autocomplete dropdown, but another thing I'd like to mention:
The way it is implemented now, you can't change the weight/grade/optical size of the icons like you can on https://fonts.google.com/icons, via font-variation-settings (CSS).

You can fix this by changing the URL of the fonts to this:

symbols__outlined:
  version: VERSION
  css:
    theme:
      //fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200: { type: external }
symbols__rounded:
  version: VERSION
  css:
    theme:
      //fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200: { type: external }
symbols__sharp:
  version: VERSION
  css:
    theme:
      //fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200: { type: external }

@gillesv, the icons are previewed inside the autocomplete dropdown as you type, not after you actually select it. Is this what you mean? Once selected, what you see is the textual representation of the icon.

Thank you for providing insight on the weight/grade/optical size of the icons, I will try to take a look at it.

@gillesv, I think I know what you mean. When you switch from a Material Icons to a Material Symbols library, there is a delay in loading the library that causes the icons to briefly show as text (it will probably depend on the quality of the user's connection). Once the library completes loading, the browser replaces the text with the icon itself.

While I agree this is not ideal, this is possibly scope for a separate ticket.

@gillesv, I replaced the libraries per your suggestion.

Thanks a lot @mahbo!

About the icon preview issue in the autocomplete dropdown:
I mean that in my setup the autocomplete dropdown doesn't show the icons when using the autocomplete search function in CKEditor (5). It only shows the labels of the icons. BUT I did some more testing and notice that this issue only occurs when you haven't switched between Icon Types.

So to reproduce this issue:

• Use the Materials Icons button in CKEditor (5)
• Start typing something in the Icon Name autocomplete field
• Notice how only the names of the icons show, but not the icons itself
• Now switch to a different Icon Type and try again: the autocomplete results now show the icons.

This problem does not seem to occur when multiple families are allowed and you switch between Icon Types. I guess some necessary things only gets loaded after an ajax event occurs, and not at initialisation?

I'm using Drupal 10.1.2 with CKEditor 5 and the Material Icons button.

Thank you for providing the details for reproducing the issue you have experienced, @gillesv.

I believe I will be able to look into this again within 2 ~ 3 weeks from now.

@gillesv,

I double-checked the issue you mentioned with the WYSIWYG overlay. I cannot reproduce this problem, though. What I seem to notice is the same I mentioned in comment #6: "There is a delay in loading the library that causes the icons to briefly show as text". As I start typing, the corresponding icon name/title is displayed for the instances found. At the very first moment, the icon is indeed not displayed, but soon afterward it renders.

This is how the module has been working up-to-date, and I don't think the fix/adjustment/improvement you mention here should be tackled as part of the current issue thread.

Hi @mahbo,

This is what I'm seeing in my setup:

• I activated two families: "Material Symbols - Outlined" and "Material Symbols - Rounded"
• In the CKEditor dialog of Material Icons, the Icon Type is set to "Material Symbols - Outlined" by default
• When I type something in the Icon Name search, I get autocomplete items that include no icon markup whatsoever. This is because the function "getFontSetFamilies" of "MaterialIconsSettings.php" returns the Material Icons families (baseline, outlined, round,...) instead of the Material Symbols families (symbols__outlined, symbols__rounded,...), resulting in an empty $font_families_intersect in the getRenderLabel function of Autocomplete.php. The $font_set variable is wrongly set to "material_icons".
• As soon as I switch to a different Icon Type (e.g. Material Symbols - Rounded), the $font_set variable is correctly set to "material_symbols" and the autocomplete items DO display the icon markup, because $font_set_families in the getRenderableLabel now retrieves the correct font families.

The issue seems to be that in the "buildForm" function of IconDialog.php, the form value "family" is null when the form is initialized. This can be fixed as follows:

    $style_options = $this->getStyleOptions(); // We get the style options once so we can reuse them

    $form['icon'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Icon Name'),
      '#default_value' => '',
      '#required' => TRUE,
      '#description' => $this->t('Name of the Material Design Icon. See @iconsLink for valid icon names, or begin typing for an autocomplete list.', [
        '@iconsLink' => Link::fromTextAndUrl(
          $this->t('the icon list'),
          Url::fromUri('https://material.io/resources/icons', ['attributes' => ['target' => '_blank']])
        )->toString(),
      ]),
      '#autocomplete_route_name' => 'material_icons.autocomplete',
      '#autocomplete_route_parameters' => [
        'font_family' => $form_state->getValue('family') ? $form_state->getValue('family') : (count($style_options) ? array_keys($style_options)[0] : NULL), // If the value of 'family' is null, we take the first option of the $style_options array
      ],
      '#prefix' => "<div id=\"{$field_wrapper_id}\">",
      '#suffix' => '</div>',
    ];

    $options = [];
    foreach ($settings->get('families') as $type) {
      $options[$type] = ucfirst($type);
    }
    $form['family'] = [
      '#title' => $this->t('Icon Type'),
      '#type' => 'select',
      '#options' => $style_options, // reuse previously determined style options
      '#ajax' => [
        'callback' => [$this, 'handleIconStyleUpdated'],
        'event' => 'change',
        'wrapper' => $field_wrapper_id,
      ],
    ];

I commented the changes I would implement in the buildForm function of IconDialog.php.

@gillesv, thank you for the code provided above, this totally makes sense. I have applied the suggested changes and pushed the latest commit to the repo. Feel free to test it again and confirm it now works as expected/desired.