Skip to content

fix(#4891): restore icon spacing in Material buttons - #4892

Open
tenthe wants to merge 1 commit into
devfrom
4891-icons-in-material-buttons-lack-spacing-and-size-rules
Open

fix(#4891): restore icon spacing in Material buttons#4892
tenthe wants to merge 1 commit into
devfrom
4891-icons-in-material-buttons-lack-spacing-and-size-rules

Conversation

@tenthe

@tenthe tenthe commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Purpose

Icons inside Angular Material buttons were written as raw <i class="material-icons">. Material's spacing and sizing rules are scoped to .mat-icon, so those buttons got neither the 8px gap nor the 1.125rem size clamp. This PR converts them to <mat-icon> and removes the manual &nbsp; spacers added to compensate.

Changes

  • Converts 76 icons across 44 templates to <mat-icon>, adding MatIcon to the 30 components that lacked it.
  • Removes 48 &nbsp; spacers that would otherwise stack on the restored margin.
  • Leaves non-Material buttons alone — they define their own gap and icon size.
grafik

Remarks

PR introduces (a) breaking change(s): yes

PR introduces (a) deprecation(s): yes

@tenthe tenthe linked an issue Sep 8, 2026 that may be closed by this pull request
@github-actions github-actions Bot added the ui Anything that affects the UI label Sep 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui Anything that affects the UI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Icons in Material buttons lack spacing and size rules

1 participant