skills.rest
ishiyan
ishiyanCOMMUNITY
Explore all skills by this author →
GitHub

material-design-3-icons

Standardize Material Design 3 icons using Material Symbols font-variation axes.

Updated Nov 24, 2021
Search Tags:#typography#accessibility#icons#ui-design#iconography#material-symbols#material-design
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-icons-ishiyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-icons
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-design-3-icons
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-icons-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent usage of Material Design 3 icons across projects, resulting in fragmented UI and accessibility gaps. This skill provides a cohesive approach to implementing icons that align with Material Design 3, scale reliably, and remain accessible.

Core Features & Use Cases

  • Consistent icon style: Use one Material Symbols style (outlined, rounded, or sharp) across the interface.
  • Dynamic customization: Leverage font variation axes (FILL, wght, GRAD, opsz) to adjust icons without multiple assets.
  • Accessibility compliance: Apply proper aria-labels and sizing to meet touch targets.
  • Theming and sizing: Align icons with color tokens and optical sizes for responsive UI.

Quick Start

Install the Material Symbols font and apply the recommended font-variation-settings to render consistent M3 icons.

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 standardize Material Design 3 icons for consistent UI design?▼

Standardize Material Design 3 icons by implementing Material Symbols with unified styles like outlined or rounded, and applying consistent font-variation-settings to ensure cohesive UI design across your project.

What are Material Symbols font variation axes and how do they work?▼

Material Symbols font variation axes include FILL, wght, GRAD, and opsz. They work by allowing dynamic customization of icon thickness, fill, and optical size without needing multiple image assets.

How do I make Material Design 3 icons meet accessibility compliance?▼

Make Material Design 3 icons accessible by applying proper aria-labels for screen readers and configuring proper sizing to meet minimum touch target requirements for accessibility compliance.

Can I use Material Symbols icons across web and mobile apps?▼

Yes, you can use Material Symbols icons across web and mobile apps. They provide scalable vector iconography that adapts to responsive UI theming and optical sizing for both platforms.

Why do my Material Design 3 icons look inconsistent across different components?▼

Material Design 3 icons look inconsistent when projects mix different styles or fail to configure font-variation-axes. Standardize by choosing one Material Symbols style and applying uniform settings.

Do I need to load the Material Symbols font to use M3 icons?▼

Yes, you need to load the Material Symbols font to render M3 icons. This allows you to leverage font variation axes for dynamic theming and ensures scalable, accessible iconography.

Related Skills

Explore More Design & Creative Skills→
shelbeelyshelbeely
4

material-design-3-icons

Implement Material Design 3 icons using Material Symbols variable font axes.

Community
Intermediate
david-saintdavid-saint

material-design-3

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

Community
Advanced
JhabbigJhabbig

visual-design-foundations

Establish visual design systems from typography, color, spacing, and iconography standards.

Community
Intermediate
RuzenieRuzenie
2

svg-canvas-icon-engine

Convert SVG and Canvas icon capabilities into executable icon generation skills.

Community
Intermediate