Support UI Icons

I will try to make the change to support icons settings. To be able set a size of 1em otherwise icons are not automatically aligned.

It seems that #states does not apply on the icon_autocomplete form element.

With a small amount of CSS, here SASS code, which will be found in ✨ Replace FontAwesome related features by UI Icons Active :

a.ext .extlink[data-extlink-placement="append"],
a.mailto .extlink[data-extlink-placement="append"],
a.tel .extlink[data-extlink-placement="append"] {
  padding-inline-start: 5px;

  & svg {
    vertical-align: text-top;
  }
}

Patch for Composer usage.

Will need updating to default settings file + update hook.

Feedbacks from comment 9 addressed.

appears to have test failures. I'd be very keen to get this in too, client wants to replace the icons with uswds ones.

Hi,

MR updated regarding the latest dev version of ui_icons and ready for core MR.

But I think it will break with ui_icons-1.0.0-beta2. So I don't know if you want to merge.

Rebased

But testing noticed some things

1. The styling is now off, not sure we care but some basic stuff should maybe added?
2. If no icon set, for example tel, icon doesn't appear at all.

1: This is normal, as the Fontawesome library provides some basic CSS with its icons for auto alignment and default styling. So a "default" styling totally depends on your icon pack.

So either your icon pack provides the default styling and you have declared it as a library and put the library in the icon pack to be loaded automatically, or Extlink can provide a default styling but I think it is a wrong solution due to the potential diversity of icons available now with UI Icons.

For example in my case with a ui_suite_bootstrap based theme, ✨ Replace FontAwesome related features by UI Icons Active , I have the following CSS, note that "padding-inline-start" was already there even before UI Icons, I only added vertical-align:

a.ext .extlink[data-extlink-placement="append"],
a.mailto .extlink[data-extlink-placement="append"],
a.tel .extlink[data-extlink-placement="append"] {
  padding-inline-start: 5px;

  & svg {
    vertical-align: text-top;
  }
}

2: Can you please provide screenshots or share your config? I don't get exactly the tested case.

Also for the record, in the case of Bootstrap there is the utility classes: https://getbootstrap.com/docs/5.3/helpers/icon-link/

For Bootstrap 5, adding icon-link class with extlink config form is perfect.