[Feature Request] Better support for custom icon size in VAlert

[J-Sek]

Problem to solve

Changing default icon size in VAlert is not convenient.

• does not adapt to $alert-title-font-size
• ignores defaults and requires #prepend slot to override size
• requires spacing tweaks to align in VAlert without title

Demo

My current workaround: custom wrapper component that abstracts fixes

Proposed solution

• respect defaults (e.g. VAlert: { VIcon: { size: 24 } })
• or introduce new icon-size prop
• properly align with text when there is no title
  • min-height: 32px; for .v-alert__prepend
  • and padding-block: 4px for .v-alert__content:not(:has(.v-alert-title))
• (nice to have) support new SASS variable $alert-prepend-icon-size

See example with style adjustments

[MatthewAry]

You could try using the prepend slot to work around this for now.

[J-Sek]

You could try using the prepend slot to work around this for now.

Not really, it requires full wrapper around VAlert and a way to recognize when the lines wrap.

In v2 icons were 24px in size, and this was not an issue (Codepen is slightly unstable, but maybe it loads for you - example)

All I want to say is that there is a room for improvement and I wish to know which solution would be preferred so I can move on and create a PR.

BTW. I just noticed another case when using clearable, title and no text - title is shifted down and misaligned with the icon, so I took another look and refined CSS changes (playground).