Aman-Mittal opened a new issue, #263:
URL: https://github.com/apache/fineract-backoffice-ui/issues/263
## Summary
Two buttons in the top header have no icon when the app loads. Both are
still clickable — they are just invisible, so the button reads as an empty gap:
- the sidebar collapse/expand button, at the far left of the header
- the light/dark theme toggle, in the cluster on the right
Every other icon on the page renders. On a dashboard load I counted 133
icons drawn correctly and exactly these 2 blank.
The icons come back as soon as you click the button once. So the buttons
look broken until you happen to press one, and then they look fine for the rest
of the session — which is why this is easy to miss.
## Where
`src/app/layout/header.component.ts`
```html
<!-- line 62 -->
<ion-icon
[name]="sidebarService.isCollapsed() ? 'menu-outline' :
'chevron-back-outline'"
></ion-icon>
<!-- line 124 -->
<ion-icon
[name]="themeService.isDarkMode() ? 'sunny-outline' : 'moon-outline'"
></ion-icon>
```
## Cause
`ion-icon` reads its `name` when the element is connected to the page.
Angular applies a **binding** during the first change-detection pass, which
runs *after* the element has been inserted — so `ion-icon` connects with no
name, finds nothing to draw, and does not pick the name up when it arrives a
moment later. A **static** `name="..."` is set before insertion, which is why
every other icon in the same header is fine.
Changing the value later does re-trigger it, which is what the click is
doing.
This is not a registration problem: all four names are present in
`src/app/core/icons.ts`, `npm run check:icons` passes, and creating `<ion-icon
name="sunny-outline">` by hand at runtime draws it correctly.
## Fix
Render two `ion-icon` elements with **static** names behind `@if`, instead
of one element with a bound name:
```html
@if (sidebarService.isCollapsed()) {
<ion-icon name="menu-outline"></ion-icon>
} @else {
<ion-icon name="chevron-back-outline"></ion-icon>
}
```
**Verified**: with that change applied to the collapse button and the theme
toggle left alone as a control, the collapse icon draws on first load and the
theme toggle is still blank — same page, same load. Then apply the same shape
to the theme toggle.
Please do not "fix" this by switching to `[attr.name]`. That was tried and
it does **not** work; the timing is identical.
## Not in scope
Six other `[name]` bindings exist (`sidebar.component.ts`, `staff-list`,
`client-addresses-list`, `notifications-config`, `data-table` sort arrow). They
all render correctly today, because their elements are created after the first
paint, by which point `ion-icon` behaves normally. Leave them alone — this
issue is only about the two in the header.
## How to check your work
1. `npm start`, sign in, and look at the far left and far right of the
header **without clicking anything**. Both icons should be visible.
2. Click each button; the icon should swap and stay visible.
3. `npm run check:icons` and `npm test` still pass.
## Business Value
The header is on every screen, so this is the first thing anyone sees. Two
of the app's global controls — collapsing the navigation and switching to dark
mode — are invisible until discovered by accident, which for most users means
never. Anyone working on a small screen, where collapsing the sidebar is the
difference between a usable table and a cramped one, simply does not know the
control is there.
It also costs nothing to keep: the buttons already work, and the fix is a
template change with no logic behind it.
## Good first issue
Self-contained, one file, no API or state involved, and the result is
visible on screen without running anything but the app.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
