Ignite UI CLI Version
15.0.0-rc3
Framework
Angular
CLI Command
new
Node.js Version
24.2.0
Operating System
Windows
Package Manager
None
Description
When generating an icon button with a badge, the badge is sometimes added as a child of igxIconButton and a sibling of the icon, instead of being placed in a wrapper alongside the button.
This results in incorrect badge rendering.
Steps to Reproduce
- Generate an icon button with a badge using a prompt like:
Create an Angular application using Ignite UI for Angular that focuses on advanced data management, reporting, and user interaction.
The app should present complex datasets using multiple types of grids and charts, with powerful tools for filtering, searching, and building custom queries. Users should be able to input and modify data through structured forms, grouped inputs, and various selection controls.
Provide a rich interactive experience where users can navigate through different sections using menus and drawers, interact with contextual actions, and open detailed views in overlays or dialog windows. Include features for dragging elements, toggling states, and adjusting parameters dynamically.
The interface should include visual cues such as progress indicators, highlighted text for search results, compact status markers, and quick actions embedded throughout the UI. Allow users to customize views, switch layouts, and manage content within resizable and flexible containers.
Focus on delivering a highly interactive, responsive experience that supports both detailed data entry and high-level analytics, with smooth transitions and clear user feedback.
Actual Result
igx-badge is placed inside igxIconButton, leading to incorrect visual rendering.
<button igxIconButton="flat" aria-label="Notifications">
<igx-icon>notifications</igx-icon>
<igx-badge [type]="'error'" [value]="3" aria-label="3 notifications"></igx-badge>
</button>
Expected Result
igxBadge should be placed in a wrapper element as a sibling to igxIconButton, following the recommended structure for proper positioning and display.
Error Output / Logs
Additional Context
No response
Ignite UI CLI Version
15.0.0-rc3
Framework
Angular
CLI Command
new
Node.js Version
24.2.0
Operating System
Windows
Package Manager
None
Description
When generating an icon button with a badge, the badge is sometimes added as a child of
igxIconButtonand a sibling of the icon, instead of being placed in a wrapper alongside the button.This results in incorrect badge rendering.
Steps to Reproduce
Actual Result
igx-badgeis placed insideigxIconButton, leading to incorrect visual rendering.Expected Result
igxBadgeshould be placed in a wrapper element as a sibling toigxIconButton, following the recommended structure for proper positioning and display.Error Output / Logs
Additional Context
No response