Using Material Icons in the Font Icon Picker

[Sorencys]

I'm submitting a bug report (not sure) about edit experience / UI, admin experience UI.

Current behavior
In stead of a FontAwesome font, I wanted to use the Material Icons two tone.
I have added the fonts WOFF2 files in my root folder font/..
And added the CSS file that material icons use.

Configured the app with all this information.

Expected behavior
That the icon picker gives the icon options in the icon field, so that the editor can choose easily.

Minimal reproduction of the problem with instructions
Config of a Icon Picker field:

The Material Icons css file:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src:    url(/font/MaterialIcons-Regular.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url(/font/MaterialIcons-TwoTone.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-two-tone {
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

and I downloaded and renamed the WOFF2 docs that I could fine in this CSS file:
Normal Material icons: https://fonts.gstatic.com/s/materialicons/v51/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
Two tone (the onces that i want to use!): https://fonts.gstatic.com/s/materialiconstwotone/v17/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2

What is the motivation / use case for changing the behavior?
I expect this to work, maybe it is something wrong at my side of the config, so I try to explain everything that I did.

Please tell us about your environment:
2sxc version(s): 11.1.0
Browser: all
DNN: 9.6.01
Language: any/all

[iJungleboy]

The prefix is used to find all CSS-classes which begin like this...

So the icon-picker uses an older standard call css content, which is based on ::before or ::after css classes. Material uses ligatures.

For us to support that, we would have to modify the icon picker, or someone else would need to create one for ligatures.

Another alternative is a simple workaround: create a css-file containing the special css-names to use the same characters. Don't know what tools you would use but it should be possible.

ATM we won't prioritize a ligatures-icon-picker simply because of resources. but is someone wants to contribute I would be glad to push them in the right direction.

[iJungleboy]

Needs sponsoring, so added to #2107 and will close unless someone contributes or sponsors this.