Bootstrap 5
Icones
Materiel Design
Template
Html
Integration Icones
Dashboard
Icones Materiel Design optimisées pour la visualisation et l'interaction. Icônes modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Icones Materiel Design Bootstrap 5 2026 23040038 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Symbols (Google Material Icons) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0,0" />
<style>
body {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}
.header-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 28px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.icon-card {
background: white;
border-radius: 16px;
padding: 1.5rem 1rem;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(26, 115, 232, 0.3);
border-color: #1a73e8;
}
.icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #1a73e8, #0d47a1);
transform: scaleX(0);
transition: transform 0.3s;
}
.icon-card:hover::before {
transform: scaleX(1);
}
.icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
border-radius: 20px;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
transform: rotate(5deg) scale(1.05);
}
.icon-wrapper .material-symbols-outlined {
font-size: 40px;
color: #1a73e8;
transition: all 0.3s;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.icon-card:hover .icon-wrapper .material-symbols-outlined {
color: white;
transform: scale(1.1);
}
.icon-name {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
word-break: break-all;
font-family: 'Roboto Mono', 'Courier New', monospace;
background: #f8f9fa;
padding: 4px 8px;
border-radius: 8px;
}
.copy-btn {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s;
width: 100%;
}
.copy-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(26, 115, 232, 0.4);
}
.copy-btn.copied {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.search-box {
background: white;
border-radius: 28px;
padding: 0.5rem 1.5rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.search-box input {
border: none;
outline: none;
padding: 12px 0;
font-size: 16px;
width: 100%;
font-family: 'Roboto', sans-serif;
}
.search-box input::placeholder {
color: #999;
}
.category-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 1rem;
}
.filter-btn {
background: white;
border: 2px solid transparent;
padding: 8px 20px;
border-radius: 30px;
font-weight: 500;
transition: all 0.3s;
color: #1a73e8;
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(26, 115, 232, 0.3);
}
.stats-badge {
background: rgba(255, 255, 255, 0.2);
padding: 8px 20px;
border-radius: 30px;
color: white;
font-weight: 500;
backdrop-filter: blur(10px);
}
.toast-notification {
position: fixed;
bottom: 30px;
right: 30px;
background: white;
padding: 16px 24px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
display: none;
align-items: center;
gap: 12px;
z-index: 9999;
animation: slideInToast 0.3s ease;
}
@keyframes slideInToast {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-notification.show {
display: flex;
}
.footer-note {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 1rem 2rem;
backdrop-filter: blur(10px);
color: white;
}
.style-tag {
background: #1a73e8;
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 12px;
margin-left: 8px;
}
.material-tip {
background: rgba(26, 115, 232, 0.1);
border-left: 4px solid #1a73e8;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<div class="header-section">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-4 fw-bold mb-3 d-flex align-items-center" style="background: linear-gradient(135deg, #1a73e8, #0d47a1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
<span class="material-symbols-outlined me-3" style="font-size: 48px; background: none; -webkit-text-fill-color: #1a73e8;">flutter_dash</span>
200 Icônes Material Design
<span class="style-tag">Material Symbols</span>
</h1>
<p class="lead text-muted mb-3">Google Material Design Icons • 2500+ icônes • Variables axes (FILL, wght, GRAD, opsz)</p>
<div class="material-tip mb-3">
<span class="material-symbols-outlined me-2" style="font-size: 20px; vertical-align: middle;">info</span>
<span style="color: #1a73e8; font-weight: 500;">Astuce :</span>
<span style="color: #666;">Les icônes Material peuvent être stylisées avec FILL (0/1), wght (100-700), GRAD (-25 à 200)</span>
</div>
<!-- Search Box -->
<div class="search-box">
<div class="d-flex align-items-center">
<span class="material-symbols-outlined text-muted me-3">search</span>
<input type="text" id="searchInput" placeholder="Rechercher une icône... (ex: home, favorite, settings)">
</div>
</div>
<!-- Category Filters -->
<div class="category-filter">
<button class="filter-btn active" data-filter="all">Toutes (200)</button>
<button class="filter-btn" data-filter="action">Actions</button>
<button class="filter-btn" data-filter="ui">UI & Navigation</button>
<button class="filter-btn" data-filter="communication">Communication</button>
<button class="filter-btn" data-filter="devices">Devices</button>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end mt-4 mt-lg-0">
<div class="stats-badge d-inline-block">
<span class="material-symbols-outlined me-2" style="font-size: 20px;">category</span>
<span id="visibleCount">200</span> icônes affichées
</div>
</div>
</div>
</div>
<!-- Icons Grid -->
<div class="row g-4" id="iconsGrid">
<!-- Les icônes seront générées ici par JavaScript -->
</div>
<!-- Footer -->
<div class="footer-note text-center mt-5">
<p class="mb-0">
<span class="material-symbols-outlined me-2" style="font-size: 18px;">content_copy</span>
Cliquez sur une icône pour copier son code HTML •
<span class="material-symbols-outlined ms-3 me-1" style="font-size: 18px;">code</span>
<span class="material-symbols-outlined">home</span>
</p>
</div>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<span class="material-symbols-outlined" style="color: #11998e; font-size: 24px;">check_circle</span>
<div>
<strong style="color: #333;">Code copié !</strong>
<div style="color: #666; font-size: 14px;" id="toastMessage"></div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Liste de 200 icônes Material Design organisées par catégories
const icons = [
// Actions (50 icônes)
'search', 'home', 'settings', 'favorite', 'favorite_border', 'delete', 'edit', 'add', 'close', 'check',
'arrow_back', 'arrow_forward', 'arrow_upward', 'arrow_downward', 'menu', 'more_vert', 'more_horiz', 'refresh', 'sync', 'download',
'upload', 'open_in_new', 'zoom_in', 'zoom_out', 'print', 'share', 'bookmark', 'bookmark_border', 'flag', 'label',
'archive', 'unarchive', 'delete_forever', 'restore', 'lock', 'lock_open', 'visibility', 'visibility_off', 'star', 'star_border',
'grade', 'thumb_up', 'thumb_down', 'compare_arrows', 'swap_vert', 'swap_horiz', 'cached', 'autorenew', 'history', 'update',
// UI & Navigation (50 icônes)
'dashboard', 'inbox', 'mail', 'chat', 'forum', 'schedule', 'event', 'today', 'date_range', 'calendar_month',
'folder', 'folder_open', 'description', 'article', 'assignment', 'receipt', 'inventory', 'shopping_cart', 'payment', 'credit_card',
'attach_file', 'link', 'cloud', 'cloud_upload', 'cloud_download', 'save', 'backup', 'layers', 'content_copy', 'content_cut',
'content_paste', 'filter_list', 'sort', 'view_list', 'view_module', 'view_quilt', 'grid_view', 'table_view', 'list', 'apps',
'checklist', 'playlist_add', 'playlist_add_check', 'playlist_play', 'queue_music', 'library_music', 'library_books', 'local_library', 'book', 'bookmarks',
// Communication (50 icônes)
'person', 'group', 'people', 'person_add', 'person_remove', 'person_search', 'contacts', 'contact_mail', 'contact_phone', 'alternate_email',
'phone', 'call', 'dialpad', 'voicemail', 'vibration', 'notifications', 'notifications_active', 'notifications_none', 'notifications_off', 'sms',
'email', 'mark_email_read', 'mark_email_unread', 'drafts', 'forward', 'reply', 'reply_all', 'send', 'schedule_send', 'mark_chat_read',
'mark_chat_unread', 'chat_bubble', 'chat_bubble_outline', 'comment', 'rate_review', 'reviews', 'feedback', 'help', 'help_outline', 'support_agent',
'info', 'warning', 'error', 'error_outline', 'report', 'report_problem', 'task_alt', 'verified', 'verified_user', 'privacy_tip',
// Devices & Hardware (50 icônes)
'smartphone', 'tablet', 'laptop', 'desktop_windows', 'computer', 'devices', 'phone_iphone', 'phone_android', 'tablet_android', 'tablet_mac',
'keyboard', 'mouse', 'headphones', 'headset', 'speaker', 'volume_up', 'volume_down', 'volume_off', 'volume_mute', 'mic',
'camera', 'camera_alt', 'videocam', 'video_call', 'photo_camera', 'photo', 'image', 'collections', 'wallpaper', 'screenshot',
'screen_share', 'stop_screen_share', 'cast', 'cast_connected', 'router', 'wifi', 'wifi_off', 'signal_cellular_alt', 'signal_wifi_bad', 'network_check',
'bluetooth', 'bluetooth_connected', 'bluetooth_disabled', 'nfc', 'usb', 'battery_full', 'battery_charging_full', 'power', 'power_off', 'restart_alt'
];
let currentFilter = 'all';
let searchTerm = '';
// Catégories pour le filtrage
const actionIcons = icons.slice(0, 50);
const uiIcons = icons.slice(50, 100);
const communicationIcons = icons.slice(100, 150);
const deviceIcons = icons.slice(150, 200);
function getIconCategory(iconName) {
if (actionIcons.includes(iconName)) return 'action';
if (uiIcons.includes(iconName)) return 'ui';
if (communicationIcons.includes(iconName)) return 'communication';
if (deviceIcons.includes(iconName)) return 'devices';
return 'other';
}
// Fonction pour afficher les icônes
function renderIcons() {
const grid = document.getElementById('iconsGrid');
const searchLower = searchTerm.toLowerCase();
const filteredIcons = icons.filter(icon => {
const matchesSearch = icon.toLowerCase().includes(searchLower);
const category = getIconCategory(icon);
if (currentFilter === 'all') return matchesSearch;
if (currentFilter === 'action') return matchesSearch && category === 'action';
if (currentFilter === 'ui') return matchesSearch && category === 'ui';
if (currentFilter === 'communication') return matchesSearch && category === 'communication';
if (currentFilter === 'devices') return matchesSearch && category === 'devices';
return matchesSearch;
});
// Mettre à jour le compteur
document.getElementById('visibleCount').textContent = filteredIcons.length;
if (filteredIcons.length === 0) {
grid.innerHTML = `
<div class="col-12 text-center py-5">
<div class="p-5 rounded-4" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
<span class="material-symbols-outlined mb-3" style="font-size: 48px; color: white; opacity: 0.5;">search_off</span>
<h3 style="color: white;">Aucune icône trouvée</h3>
<p style="color: rgba(255,255,255,0.8);">Essayez un autre terme de recherche</p>
</div>
</div>
`;
return;
}
// Création des cartes avec data-attributes
grid.innerHTML = filteredIcons.map((icon, index) => {
const iconCode = `<span class="material-symbols-outlined">${icon}</span>`;
const cardId = `icon-card-${index}`;
return `
<div class="col-6 col-md-3 col-lg-2">
<div class="icon-card" data-icon-classes="material-symbols-outlined" data-icon-code="${iconCode.replace(/"/g, '"')}" data-icon-name="${icon}" id="${cardId}">
<div class="icon-wrapper">
<span class="material-symbols-outlined">${icon}</span>
</div>
<div class="icon-name">${icon}</div>
<button class="copy-btn" data-icon-classes="material-symbols-outlined" data-icon-code="${iconCode.replace(/"/g, '"')}" data-icon-name="${icon}">
<span class="material-symbols-outlined me-1" style="font-size: 14px;">content_copy</span>Copier
</button>
</div>
</div>
`;
}).join('');
// Attacher les événements après le rendu
attachCardEvents();
}
// Fonction pour attacher les événements aux cartes
function attachCardEvents() {
// Pour les cartes entières
document.querySelectorAll('.icon-card').forEach(card => {
card.addEventListener('click', function(e) {
const classes = this.dataset.iconClasses;
const code = this.dataset.iconCode.replace(/"/g, '"');
const iconName = this.dataset.iconName;
copyIconCode(classes, code, iconName, this);
});
});
// Pour les boutons de copie
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const classes = this.dataset.iconClasses;
const code = this.dataset.iconCode.replace(/"/g, '"');
const iconName = this.dataset.iconName;
const card = this.closest('.icon-card');
copyIconCode(classes, code, iconName, card);
});
});
}
// Fonction pour copier le code de l'icône
function copyIconCode(classes, htmlCode, iconName, cardElement) {
// Créer un élément temporaire
const tempInput = document.createElement('textarea');
tempInput.value = htmlCode;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
// Afficher la notification toast
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = htmlCode;
toast.classList.add('show');
// Effet visuel sur le bouton
if (cardElement) {
const btn = cardElement.querySelector('.copy-btn');
if (btn) {
btn.classList.add('copied');
btn.innerHTML = '<span class="material-symbols-outlined me-1" style="font-size: 14px;">check</span>Copié !';
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = '<span class="material-symbols-outlined me-1" style="font-size: 14px;">content_copy</span>Copier';
}, 2000);
}
}
// Cacher le toast après 3 secondes
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// Gestionnaire de recherche
document.getElementById('searchInput').addEventListener('input', (e) => {
searchTerm = e.target.value;
renderIcons();
});
// Gestionnaire de filtres
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
currentFilter = filter;
renderIcons();
});
});
// Rendu initial
renderIcons();
// Animation des cards au scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
setTimeout(() => {
document.querySelectorAll('.icon-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s, transform 0.5s';
observer.observe(card);
});
}, 100);
// Statistiques des icônes
console.log('🎨 200 icônes Material Design chargées avec succès !');
console.log('💡 Utilisez font-variation-settings pour personnaliser : FILL (0/1), wght (100-700), GRAD (-25 à 200)');
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur