Icon

communication

Icons communicate meaning through visual symbols. Material Symbols provide a set of over 2,500 glyphs in variable font format.

Variants

Outlined

Default

Icon with outlined strokes

Rounded

Icon with rounded corners

Sharp

Icon with sharp corners

Properties

Name Type Required Default Description
name string - - The icon name from Material Symbols
filled boolean - - Use filled variant of the icon
weight number - 400 Icon weight from 100 to 700
grade number - - Icon grade from -25 to 200
opticalSize number - 24 Optical size from 20 to 48

Accessibility

Role: img (decorative) or aria-hidden="true"
Screen Reader Notes: Decorative icons should use aria-hidden="true". Icons conveying meaning need aria-label. Icons within buttons/links are typically decorative.

LLM Context

Intent: Provide visual symbols to communicate meaning
Anti-Patterns:
  • Icon without aria-hidden or aria-label
  • Using icon alone without text for critical actions
  • Non-standard icons without labels
  • Too many icons overwhelming the interface
Example Usage: 
<md-icon>home</md-icon>
<md-icon>favorite</md-icon>
<md-icon filled>star</md-icon>