skills.rest
pohlai88
pohlai88COMMUNITY
Explore all skills by this author →
GitHub

material-design-3-icons

Implements Material Design 3 icons using Material Symbols variable font axes and accessibility rules.

Updated Sep 5, 2026
Search Tags:#accessibility#css#icons#material design 3#variable fonts#material symbols#icon sizing
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-icons-pohlai88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-icons
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/material-design-3-icons
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-icons-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Applying Material Design 3 icon guidelines correctly requires coordinating variable font axes, optical sizing, color tokens, and accessibility attributes, which is easy to get wrong without a consolidated reference. ## Core Features & Use Cases - Variable Font Configuration: Configure the FILL, wght, GRAD, and opsz axes of Material Symbols to control fill state, weight, grade, and optical size. - Sizing and Color Guidance: Apply standard M3 icon sizes (20dp to 48dp) with matching optical sizes and M3 color tokens such as on-surface, primary, and error. - Accessibility Patterns: Implement aria-hidden for decorative icons, aria-label for standalone icon buttons, and 48x48dp minimum touch targets. - Use Case: When building a navigation bar, use this Skill to set outlined icons with FILL 0 for unselected items and animate to FILL 1 with primary color for the selected tab. ## Quick Start Apply Material Design 3 icon guidelines to style the icons in my navigation component using Material Symbols.

Frequently Asked Questions about material-design-3-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Material Symbols icons in HTML?▼

Load the Material Symbols stylesheet from Google Fonts, then place the icon name inside a span with the class material-symbols-outlined, material-symbols-rounded, or material-symbols-sharp. Ligature rendering converts the text name into the icon glyph.

How do I make Material Symbols icons filled instead of outlined?▼

Set the FILL variable font axis to 1 using font-variation-settings: 'FILL' 1 in CSS. The default value 0 renders outlined icons, and you can transition between values to indicate selection state.

What is the difference between Material Symbols outlined, rounded, and sharp?▼

Outlined is the clean default for most interfaces, rounded gives a soft friendly character, and sharp suits precise technical contexts. Material Design 3 recommends picking one style and using it consistently across the entire interface.

How do I make icon buttons accessible with Material Symbols?▼

Wrap the icon in a button element with an aria-label describing the action, and add aria-hidden="true" to the icon span itself. Ensure the button has a minimum 48x48dp touch target even if the icon renders at 24px.

Why should I not resize Material Symbols with CSS transform scale?▼

Scaling with transform distorts stroke weights and breaks optical sizing. Instead set font-size to the target size and match the opsz axis value, such as font-size 20px with opsz 20, so strokes render correctly at that size.

Related Skills

Explore More Design & Creative Skills→
david-saintdavid-saint

material-design-3

Build Material Design 3 web interfaces with @material/web components and theming tokens.

Community
Advanced
JKKN-InstitutionsJKKN-Institutions

mobile-fab-navigation

Build mobile bottom navigation with expandable FAB menus in Next.js/React apps.

Official
Advanced
LionGabLionGab

accessibility-checker

Validates WCAG AAA accessibility compliance for touch targets, contrast ratios, and interactive labels in apps.

Community
Intermediate
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced