Material Icons : les icônes Material Design Google

Introduction et présentation

Material Icons est la bibliothèque d'icônes officielle de Google. Conçue avec les principes du Material Design, elle offre un style moderne et minimaliste.

Avantages :

• Design moderne et épuré (Material Design)
• 1000+ icônes en 5 poids (thin, light, regular, medium, bold)
• Multiple styles : outlined, filled, two-tone
• Optimisé pour Angular Material
• CDN global Google (ultra rapide)

Installation et setup

CDN Google :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

NPM :

npm install @mui/icons-material

// React usage
import HomeIcon from '@mui/icons-material/Home';

Multiple styles :

<!-- Outlined -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

<!-- Filled -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

<!-- Two-tone -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet">

Utilisation basique

Filled (par défaut) :

<span class="material-icons">home</span>
<span class="material-icons">favorite</span>
<span class="material-icons">settings</span>

Outlined :

<span class="material-icons-outlined">home</span>
<span class="material-icons-outlined">favorite</span>

Poids (densité) :

<span class="material-icons" style="font-weight: 300;">home</span>  <!-- Light -->
<span class="material-icons" style="font-weight: 400;">home</span>  <!-- Regular -->
<span class="material-icons" style="font-weight: 700;">home</span>  <!-- Bold -->

Customisation

Tailles standardisées :

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

<!-- Usage -->
<span class="material-icons md-48">home</span>

Couleur :

.material-icons {
    color: #1976d2;  /* Material Blue */
    vertical-align: middle;
}

.material-icons.secondary {
    color: #f50057;  /* Material Pink */
}

Animations :

.material-icons.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Intégration avec frameworks

Angular Material :

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [MatIconModule]
})
export class AppModule { }

// Template
<button mat-icon-button>
  <mat-icon>favorite</mat-icon>
</button>

React (MUI) :

import HomeIcon from '@mui/icons-material/Home';
import { IconButton } from '@mui/material';

function MyComponent() {
  return (
    <IconButton>
      <HomeIcon sx={{ fontSize: 40 }} />
    </IconButton>
  )
}

Vue :

// HTML
<i class="material-icons">home</i>

// Ou avec composant custom
<material-icon name="home"></material-icon>

Cas d'usage et exemples

Navigation avec icônes :

<nav class="bottom-nav">
  <a href="/">
    <span class="material-icons">home</span>
    <label>Accueil</label>
  </a>
  <a href="/search">
    <span class="material-icons">search</span>
    <label>Recherche</label>
  </a>
</nav>

FAB Button (Floating Action Button) :

<button class="fab">
  <span class="material-icons">add</span>
</button>

<style>
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #1976d2;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fab .material-icons {
    color: white;
    font-size: 24px;
}
</style>

Comparaison et bonnes pratiques

Material Icons vs Font Awesome :

• Material Icons : Modern design, Google integration, Material Design first
• Font Awesome : Plus d'icônes, meilleur support, plus populaire

Quand utiliser Material Icons :

• Projets Angular Material
• Applications Material Design
• Applications Google-like
• Besoin de styles multiples (outlined, filled)

Optimisation :

• Utilisez les icônes outlined pour une apparence légère
• CDN Google est ultra-rapide
• Préférez les variants spécifiques si possible