vuetifyjs / vuetifyjs/vuetify

[Bug Report][3.9.3] VIcon size not work inside VBadges template badge

Open
#21,882 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VBadge has workaround S: maybe T: enhancement
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Environment

Vuetify Version: 3.9.3
Vue Version: 3.5.13
Browsers: Edge 138.0.0.0
OS: Windows 10

Steps to reproduce
  1. Create v-badge
  2. In v-badge's template #badge, create v-icon with size
  3. Predefined sizes (e.g. 'small', 'x-large') doesn't work
  4. sizes with number will only affect the width of icon
Expected Behavior

VIcon size works

Actual Behavior

VIcon size won't work

Reproduction Link

https://play.vuetifyjs.com/#...

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Vuetify Playground reproduction and inspect VIcon sizing inside the v-badge #badge template. Verify predefined sizes such as small and x-large, along with numeric sizes; done means the icon's width and height both respond correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.