How to prevent rule `@angular-eslint/template/i18n` from linting `mat-icon` elements

Question

I use the rule @angular-eslint/template/i18n to lint elements in template that contains text node and doesn't have an i18n attribute.

The Angular Material mat-icon elements use inner text to identify the icon key like this :

<mat-icon>menu</mat-icon>

As it contains text, it is being linted by eslint as well. Unfortunately, I couldn't find a way add exceptions to this rule to exclude some element tags like mat-icon

Here is the eslint config I am using :

    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/i18n": [
          "warn",
          {
            "checkId": false,
            "checkText": true,
            "checkAttributes": false
          }
        ]
      }
    }

Answer 1

Since Angular 14.1 and the support of the SEO friendly ligature icons, you should change your mat-icon usage like so:

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

This has the advantage of avoiding your i18n issue while also preventing your icon name to appear in Google search result page.