Bug with Angular Material Icon

[ZsirosBen]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi, some google icon is not visible if I put them in a mat-icon tag
for example I can use 'home' icon but I can't use 'destruction','infrared' and 'Motionsensor urgent' - icons

Do you know anything about this?

Reproduction

https://stackblitz.com/edit/components-issue-kujppp?file=src%2Fapp%2Fexample-component.html

Expected Behavior

It should be visible.

Actual Behavior

I do not see the destruction icon

Environment

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

[json-derulo]

It doesn't work because those icons are not part of the Material Icons font.

https://fonts.google.com/icons?icon.query=destruction&icon.set=Material+Icons
https://fonts.google.com/icons?icon.query=infrared&icon.set=Material+Icons

Maybe you are looking for support of Material Symbols? This is a new icon font by Google which is not officially supported by Angular Material yet. But there are workarouds, see #24845.

[ZsirosBen]

Hi,

Yes! Sorry I was not aware of this..

Thanks for your answer!

Happy Holidays!!

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