Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

feat(button): add filled/tonal matIconButton

Aberta
#33,091 0 comentários 5 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
52/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Pouca atividade
Stack de tecnologia
angular, typescript
Domínio
frontend

Direção de pesquisa

Comece comparando as opções de aparência existentes de matButton com matIconButton e, em seguida, revise as variantes de botões de ícone do Material Design 3 vinculadas no issue. Considera-se concluído quando matIconButton puder renderizar aparências filled e tonal como botões de ícone circulares, distintos de FABs e dos botões de ícone padrão.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

area: material/button feature gemini-triaged P4
Feature Description

Currently, matButton supports multiple appearances (text, filled, tonal, outlined, elevated) via the matButton attribute, but matIconButton does not accept any appearance input — it always renders as a transparent circular button.

Material Design 3 specifies filled and tonal icon button variants as distinct components alongside the standard and outlined icon buttons. There is currently no straightforward way to create these in Angular Material without using matFab/matMiniFab (which have different sizing, elevation, and semantics) or matButton="filled" with an icon (which doesn't produce a circular icon button).

Use Case

Developers building M3-compliant UIs need filled and tonal icon buttons for actions that require more visual emphasis than a standard icon button, but don't carry the semantic meaning of a FAB (floating action button). For example, a filled icon button for a primary action like "play" or "add to cart" in a toolbar, or a tonal icon button for a medium-emphasis toggle like "bookmark" or "favorite."

Linguagem predominante
TypeScript
Estrelas
25k
Forks
6.8k
Merge médio
1d 7h
PRs com merge (30d)
92

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de angular/components

Todas as issues de angular/components

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.