Skip to content

[CLI MCP] Incorrect structure when generating igxIconButton with igx-badge #1659

@viktorkombov

Description

@viktorkombov

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.

Image Image

Steps to Reproduce

  1. 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

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions