feat(material/icon): SEO friendly ligature icons #24578

PowerKiKi · 2022-03-11T15:25:41Z

The new way to use ligature icons, via the fontIcon attribute, allows to hide
the font name from search engine results. Otherwise, the font name, which was
never intended to be read by any end-users, would appear in the middle of legit
sentences in search results, thus making the search result very confusing to read.

New recommended usage is:

- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>

To also enable this for custom font, include the special mat-ligature-font class
when registering the font alias. So like this:

iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font');

And use like this:

<mat-icon fontSet="f1" fontIcon="home"></mat-icon>

Fixes #23195
Fixes #23183
Fixes google/material-design-icons#498

crisbeto · 2022-03-12T07:23:00Z

src/material/icon/icon.ts

@@ -140,7 +143,7 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
    'role': 'img',
    'class': 'mat-icon notranslate',
    '[attr.data-mat-icon-type]': '_usingFontIcon() ? "font" : "svg"',
-    '[attr.data-mat-icon-name]': '_svgName || fontIcon',
+    '[attr.data-mat-icon-name]': '_svgName || fontIcon || icon',


Couldn't we reuse the existing fontIcon input for this?

The reason I went with a different attribute is to avoid as much as possible to change existing behavior. If we reuse fontIcon, then that means all pre-existing usage of it will now have the new CSS applied to them. And that would break usage of non-ligature icons, such as FontAwesome, as seen in this alternative prototype:

So I guess technically we could still re-use fontIcon, but if and only if we have a separate way to tell which fontSet is ligature or not. I suppose we could do something in MatIconRegistry for that, but that seemed over-complicated to me. Is it still something you would like to explore ?

Instead of doing this in JS and introducing a new input, couldn't we have a CSS class that people can specify if they're using ligature icons? The class can be set through MatIconRegistry.setDefaultFontSetClass so all this PR would have to do would be to add the class and document how to use it.

Sounds like a good idea to me. I'll update the PR soonish

@crisbeto I force pushed the new alternative. The resulting API seems cleaner this way. Let me know if some adjustments are needed.

PowerKiKi · 2022-04-01T15:42:16Z

@andrewseguin I rebased the PR as asked. Could you please finish the review ?

andrewseguin · 2022-04-01T15:44:28Z

@crisbeto Would you mind reviewing this?

The new way to use ligature icons, via the `fontIcon` attribute, allows to hide the font name from search engine results. Otherwise, the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>home</mat-icon> + <mat-icon fontIcon="home"></mat-icon> ``` To also enable this for custom font, include the special `mat-ligature-font` class when registering the font alias. So like this: ```ts iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font'); ``` And use like this: ```html <mat-icon fontSet="f1" fontIcon="home"></mat-icon> ``` Fixes angular#23195 Fixes angular#23183 Fixes google/material-design-icons#498

crisbeto · 2022-04-16T05:25:43Z

src/material/icon/icon-registry.ts

@@ -149,7 +149,7 @@ export class MatIconRegistry implements OnDestroy {
   * specified. The default 'material-icons' value assumes that the material icon font has been
   * loaded as described at http://google.github.io/material-design-icons/#icon-font-for-the-web
   */
-  private _defaultFontSetClass = ['material-icons'];
+  private _defaultFontSetClass = ['material-icons', 'mat-ligature-font'];


I think that adding it to the defaults may break existing clients. We should document in icon.md how people can opt into it instead. A live example would be good as well.

@crisbeto, sorry for the unusually late reply.

I don't think it is a breaking change, because even though the new class is always added, it only has any effect if and only if the fontIcon attribute is also used. And since that attribute did not have any meaning for the material-icons font previously, there is no reason to have that in existing code. And even then if a user incorrectly duplicated the icon name, like <mat-icon fontIcon="home">home</mat-icon>, then it would only show the icon over each other. So even in case of past incorrect use, there is not visual difference at all.

Also I don't think that having a new class (which does nothing) on a element is considered breaking, because classes are prefixed with mat- specifically to avoid class name conflicts.

Below is an extract of the dev-app where you can see that new usage style (by attribute), and the old usage style (by content) are both pixel perfect, without any changes for the old usage:

What exactly did you have in mind when you mentioned breaking change ?

PowerKiKi · 2022-05-24T12:19:16Z

Can we still get this merged for the v14 release ?

andrewseguin · 2022-06-24T20:58:48Z

@crisbeto I double-checked this with a TGP and found no failing internal tests. Do you think this can go in as-is?

crisbeto

LGTM

The new way to use ligature icons, via the `fontIcon` attribute, allows to hide the font name from search engine results. Otherwise, the font name, which was never intended to be read by any end-users, would appear in the middle of legit sentences in search results, thus making the search result very confusing to read. New recommended usage is: ```diff - <mat-icon>home</mat-icon> + <mat-icon fontIcon="home"></mat-icon> ``` To also enable this for custom font, include the special `mat-ligature-font` class when registering the font alias. So like this: ```ts iconRegistry.registerFontClassAlias('f1', 'font1 mat-ligature-font'); ``` And use like this: ```html <mat-icon fontSet="f1" fontIcon="home"></mat-icon> ``` Fixes #23195 Fixes #23183 Fixes google/material-design-icons#498 (cherry picked from commit b37c96d)

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fcdk/14.0.6/14.1.0) | | [@angular/material](https://github.com/angular/components) | dependencies | minor | [`14.0.6` -> `14.1.0`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/14.0.6/14.1.0) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v14.1.0`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#1410-neon-plate-2022-07-20) [Compare Source](angular/components@14.0.6...14.1.0) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [176213d70](angular/components@176213d) | feat | **scrolling:** make scroller element configurable for virtual scrolling ([#24394](angular/components#24394)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [1256c6cf2](angular/components@1256c6c) | feat | **core:** use strong focus indicators in high contrast mode | | [dd1a0feb5](angular/components@dd1a0fe) | feat | **icon:** SEO friendly ligature icons ([#24578](angular/components#24578)) | | [799cf7cf2](angular/components@799cf7c) | fix | **datepicker:** add i18n strings ([#25024](angular/components#25024)) | ##### cdk-experimental | Commit | Type | Description | | -- | -- | -- | | [5c2a7e00e](angular/components@5c2a7e0) | fix | **listbox:** clean up some TODOs ([#25005](angular/components#25005)) | | [0b5963753](angular/components@0b59637) | fix | **listbox:** clean up the listbox API and make it work with forms ([#24920](angular/components#24920)) | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [864f92e0f](angular/components@864f92e) | feat | **mdc-button:** support custom leading/trailing icons ([#24987](angular/components#24987)) | | [1f6810831](angular/components@1f68108) | feat | **mdc-list:** add support for activated state in harness ([#24934](angular/components#24934)) | | [c543db57a](angular/components@c543db5) | fix | **mdc-checkbox:** remove extra a11y tree node for the <label/> ([#24907](angular/components#24907)) | | [7736515f1](angular/components@7736515) | fix | **mdc-form-field:** ensure appearance is valid ([#24963](angular/components#24963)) | #### Special Thanks Adrien Crivelli, Amy Sorto, Andrew Seguin, Jackie Chu, Kristiyan Kostadinov, Maxi, Miles Malerba, Paul Gschwendtner, Wagner Maciel, Zach Arend and atrawally  </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Co-authored-by: cabr2-bot <[email protected]> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1470 Reviewed-by: Epsilon_02 <[email protected]> Co-authored-by: Calciumdibromid Bot <[email protected]> Co-committed-by: Calciumdibromid Bot <[email protected]>

angular-automatic-lock-bot · 2022-07-29T00:04:05Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

PowerKiKi requested a review from andrewseguin as a code owner March 11, 2022 15:25

PowerKiKi force-pushed the seo-friendly-mat-icons branch from 9e96870 to 90317c3 Compare March 11, 2022 15:37

PowerKiKi requested a review from a team as a code owner March 11, 2022 15:37

PowerKiKi force-pushed the seo-friendly-mat-icons branch from 90317c3 to 1c554bf Compare March 11, 2022 18:01

crisbeto reviewed Mar 12, 2022

View reviewed changes

andrewseguin added the needs rebase label Mar 29, 2022

PowerKiKi force-pushed the seo-friendly-mat-icons branch 4 times, most recently from 4b54d56 to c4abd53 Compare April 1, 2022 15:39

andrewseguin removed the needs rebase label Apr 1, 2022

PowerKiKi force-pushed the seo-friendly-mat-icons branch 3 times, most recently from bca0ec1 to f54262f Compare April 2, 2022 18:50

PowerKiKi force-pushed the seo-friendly-mat-icons branch from f54262f to 8a82059 Compare April 2, 2022 20:15

josephperrott removed the request for review from a team April 4, 2022 18:26

andrewseguin assigned crisbeto Apr 14, 2022

crisbeto reviewed Apr 16, 2022

View reviewed changes

andrewseguin assigned PowerKiKi and unassigned crisbeto Apr 28, 2022

crisbeto approved these changes Jun 25, 2022

View reviewed changes

crisbeto assigned andrewseguin and unassigned PowerKiKi Jun 25, 2022

crisbeto added action: merge The PR is ready for merge by the caretaker target: minor This PR is targeted for the next minor release labels Jun 25, 2022

andrewseguin merged commit b37c96d into angular:main Jun 27, 2022

PowerKiKi deleted the seo-friendly-mat-icons branch June 28, 2022 14:48

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(material/icon): SEO friendly ligature icons #24578

feat(material/icon): SEO friendly ligature icons #24578

PowerKiKi commented Mar 11, 2022 •

edited

Loading

crisbeto Mar 12, 2022

PowerKiKi Mar 14, 2022 •

edited

Loading

crisbeto Apr 1, 2022 •

edited

Loading

PowerKiKi Apr 1, 2022

PowerKiKi Apr 2, 2022

PowerKiKi commented Apr 1, 2022

andrewseguin commented Apr 1, 2022

crisbeto Apr 16, 2022

PowerKiKi May 24, 2022

PowerKiKi commented May 24, 2022

andrewseguin commented Jun 24, 2022

crisbeto left a comment

angular-automatic-lock-bot bot commented Jul 29, 2022

feat(material/icon): SEO friendly ligature icons #24578

feat(material/icon): SEO friendly ligature icons #24578

Conversation

PowerKiKi commented Mar 11, 2022 • edited Loading

crisbeto Mar 12, 2022

Choose a reason for hiding this comment

PowerKiKi Mar 14, 2022 • edited Loading

Choose a reason for hiding this comment

crisbeto Apr 1, 2022 • edited Loading

Choose a reason for hiding this comment

PowerKiKi Apr 1, 2022

Choose a reason for hiding this comment

PowerKiKi Apr 2, 2022

Choose a reason for hiding this comment

PowerKiKi commented Apr 1, 2022

andrewseguin commented Apr 1, 2022

crisbeto Apr 16, 2022

Choose a reason for hiding this comment

PowerKiKi May 24, 2022

Choose a reason for hiding this comment

PowerKiKi commented May 24, 2022

andrewseguin commented Jun 24, 2022

crisbeto left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Jul 29, 2022

PowerKiKi commented Mar 11, 2022 •

edited

Loading

PowerKiKi Mar 14, 2022 •

edited

Loading

crisbeto Apr 1, 2022 •

edited

Loading