Angular Material - Icons

Choose recognizable icons and provide accessible names for icon-only actions.

How it works

Icons can reinforce a control’s meaning, but an icon alone may be ambiguous. Add accessible labels for icon-only buttons, keep decorative icons out of the accessibility tree when appropriate, and use a consistent icon set and size.

Practical checklist

• Confirm whether the application uses AngularJS Material 1.x or modern Angular Material for Angular v2+.
• Use meaningful labels, keyboard-accessible interactions, and visible focus states.
• Test responsive behavior, validation, and assistive-technology output.
• Review dependency support and security before maintaining a legacy deployment.

Further reading: Tutorialspoint: Angular Material - Icons · AngularJS Material legacy documentation · Current Angular Material documentation.

Back to course overview · Previous: Angular Material - Inputs · Next: Angular Material - Grids