---
name: feedback-pageicon-topbar
description: Ne jamais modifier display ou ajouter de wrapper dans .topbar pour les icônes de titre de page
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 743b204f-7d6b-45ed-b91c-387060b5941e
---

Ne pas modifier la structure flex du `.topbar` pour y insérer des icônes.

**Why:** `.topbar` est `display: flex; justify-content: space-between`. Ajouter un wrapper div ou mettre `display: flex` sur le `h2` change le nombre/type de flex items, ce qui casse le layout en cascade (KPIs `dr-kpi-row`, tabs `dr-tabs`, et même `account-layout` sur d'autres pages non modifiées).

**How to apply:** Insérer l'icône comme `<img>` inline directement dans le `h2` existant, sans toucher à sa structure ni à son `display`. Utiliser `style={{ display: 'inline', verticalAlign: 'middle', marginRight: 10 }}` sur l'img. Le `h2` reste un élément block normal, l'img est du contenu inline — zéro interaction avec flex/grid.

```jsx
<h2><PageIcon name="dashboard" />Tableau de bord</h2>
```

Le composant `PageIcon` est dans `frontend/src/components/PageIcon.jsx` avec un cache module-level (un seul appel `/api/icons` pour toutes les pages). Taille par défaut : 40px.
