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

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, https://github.com/google/material-design-icons/issues/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

[ivan-saorin]

This solution seems reasonable to me. 👍

[PowerKiKi]

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