bug(mat-icon): Font icon names are indexed by search engines

[PowerKiKi]

Reproduction

https://stackblitz.com/edit/angular-gkwffm?file=src%2Fapp%2Ficon-overview-example.html

Steps to reproduce:

1. Open stackblitz
2. Select all with ctrl+a
3. See that the original icon is selected, hence indexed by search engine (bad)
4. See that the new icon is not selected, hence not indexed by search engine (good)

Expected Behavior

When I use a <mat-icon> I expected that the icon name is never indexed in search engine result. And that should be the case for all forms of <mat-icon>.

Actual Behavior

When I use the form <mat-icon>home</mat-icon> the text home will appear in search result pages (eg: on google.com), but this text has no value at all, and might even be counter-productive, because the icon name does not necessarily match the app specific semantic. More generally, the configuration of an Angular component should not end up on Google search results (or any other search engines).

There is a related issue, google/material-design-icons#498, where a workaround is mentioned. It is to use the attribute data-nosnippet, as detailed in https://developers.google.com/search/docs/advanced/crawling/special-tags#data-nosnippet. But as far as I know, this only works for Google. And it must be used manually on every single usage of <mat-icon>, which is error prone.

Proposed Solution

I think we should have a more robust solution baked in <mat-icon>, as described in that issue, by using thee CSS attr() function. So new usage would be something similar to:

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

The only thing to change in <mat-icon> itself is to add the following CSS:

.mat-icon:after {
    content: attr(icon);
}

This would make the API more consistent with all possible usages being:

<mat-icon>home</mat-icon>      <= Maybe deprecate this later ?
<mat-icon icon="home"></mat-icon>
<mat-icon svgIcon="left-arrow"></mat-icon>
<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>

From the accessibility point of view, and according to https://material.angular.io/components/icon/overview#accessibility, I don't think it would change anything.

And because we don't hardcode anything about the font in CSS, the CSS weight increase is minimal, and it does not have to be maintained when the font changes.

I would be willing to create a PR for this, as long as there is a chance to get merged. So would this be acceptable ?

Environment

• Angular: 12.1
• CDK/Material: 12.1
• Browser(s): irrelevant
• Operating System (e.g. Windows, macOS, Ubuntu): irrelevant

[PowerKiKi]

Oh, this would also solve #23183 at the same time, since icons become CSS selectable (and thus customizable).

[Totati]

I've used this workaround because a client wanted to copy a table's content into an excel sheet, and the icon's texts were pasted too.

[ivan-saorin]

This solution seems reasonable to me. 👍

[crisbeto]

I believe that the text also has some accessibility implications.

[Totati]

But only in english.

[PowerKiKi]

I believe that the text also has some accessibility implications.

I don't think there is any impact on accessibility, since mat-icon does not have any accessibility features, as stated in the docs:

an icon alone does not convey any useful information for a screen-reader user. The user of <mat-icon> must provide additional information [...]

@crisbeto, shall I create a new PR for this ?

[davidecampello]

This also can help to acheive some sort of autocompletition in icon names.
If icon attribute is of type 'search', 'home', etc (all icon names), It can be very useful with IDE's autocomplete.
Of course it sould be updated every time an icon's name is updated or added.
A strongly type like fontawesome can also be very interesting...

.ts:

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
...
  faCoffee = faCoffee;

template:

...
<fa-icon [icon]="faCoffee"></fa-icon>

[angular-automatic-lock-bot]

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.}