Problems occuring due to #25779 fontIcon-attribute

[MilesAl]

What are you trying to do?

Currently, the fonticon attribute is set on the dom element, but not as mentioned in #25759 (in version 13) also a class with the same name of the font-icon. Previously in our project we set a class (with the font-family and other styles to the font) on the dom element by checking via css if the DOM element has a class with the name of the font-icon. This is no longer possible.

What troubleshooting steps have you tried?

Alternatively, you would have to refer to a separate font set everywhere, which could lead to greater effort. E.g. if a component contains a mat-icon which allows a ligature of e.g. font-awsome as well as a fonticon which needs another fontSet. Then you would have to check separately in each of these components which icon type is set. Previously this could be overridden by css according to the above mentioned principle. How do you foresee the whole thing, is still setting the class of the same name (as in v13) integrated again or is now always an explicit specification within the template necessary when using multiple IconSets in parallel?

Reproduction

Steps to reproduce:

1. Set fontIcon on any matIcon-element
2. Try to set class by css-selecting all elements which contain class with name of fontIcon

Environment

• Angular: 14.2.7
• CDK/Material: 14.2.5
• Browser(s): Chrome 106.0.5249.119
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[mmalerba]

I don't fully understand the problem being described here, but if you're trying to target styles at a particular font icon, you should be able to do that using an attribute selector instead of a font selector:

mat-icon[fonticon="my-icon"] {
  // custom styles here
}

[angular-automatic-lock-bot[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.}