Material Icons হলো Google Material Design এর একটি অংশ, যা বিভিন্ন আইকন প্রদান করে। Materialize CSS ফ্রেমওয়ার্কে Material Icons ব্যবহার করা খুবই সহজ এবং এটি ওয়েবসাইট বা অ্যাপের ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। Material Icons ব্যবহার করে আপনি সহজেই বিভিন্ন আইকন উপাদান যুক্ত করতে পারেন যেমন button, navigation, alerts ইত্যাদি।
Material Icons কী?
Material Icons হলো একটি আইকন সেট যা Google Material Design এর ডিজাইন ভাষা অনুসরণ করে। এগুলো vector-based, flat design আইকন, যা সমস্ত স্ক্রীনে সঠিকভাবে স্কেল হয়। এগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইউজার-বান্ধব এবং আকর্ষণীয় করতে পারেন।
Material Icons কিভাবে ব্যবহার করবেন?
Material Icons CDN লিঙ্ক যোগ করা: প্রথমে, আপনাকে Material Icons এর CSS ফাইল লিঙ্ক করতে হবে। এটি করার জন্য, আপনার HTML ফাইলের
<head>সেকশনে নিচের কোডটি যোগ করুন:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Material Icons ব্যবহার করা: এখন আপনি Material Icons ব্যবহার করতে পারেন। আইকনগুলো সঠিকভাবে প্রদর্শন করার জন্য,
<i>ট্যাগের মধ্যে আইকনের নাম ব্যবহার করতে হবে। উদাহরণস্বরূপ:<i class="material-icons">home</i>এই কোডটি একটি "home" আইকন প্রদর্শন করবে।
উদাহরণ
এখানে একটি উদাহরণ দেওয়া হলো, যেখানে Material Icons ব্যবহার করে একটি সিম্পল ওয়েব পেজ তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Icons Example</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome to Materialize</h1>
<button class="btn waves-effect waves-light" type="submit" name="action">
<i class="material-icons left">send</i>Send
</button>
<div>
<i class="material-icons">home</i>
<i class="material-icons">settings</i>
<i class="material-icons">notifications</i>
</div>
</div>
<!-- jQuery and Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
কোড বিশ্লেষণ:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">: এই লিঙ্কটি Material Icons সঠিকভাবে লোড করতে সহায়তা করে।<i class="material-icons">home</i>: এই কোডটি একটি home আইকন প্রদর্শন করবে।class="material-icons left": এই কোডটি একটি বাটনের মধ্যে আইকন স্থাপন করবে এবং left ক্লাসটি আইকনটিকে বাটনের বাম পাশে স্থাপন করবে।
Material Icons এর আরও উদাহরণ
Home Icon:
<i class="material-icons">home</i>Settings Icon:
<i class="material-icons">settings</i>Menu Icon:
<i class="material-icons">menu</i>Notifications Icon:
<i class="material-icons">notifications</i>
Material Icons কাস্টমাইজেশন
আপনি আইকনের আকার এবং রঙ পরিবর্তন করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<i class="material-icons" style="font-size: 48px; color: blue;">home</i>
এই কোডটি home আইকনটির আকার ৪৮ পিক্সেল এবং রঙ নীল করবে।
উপসংহার
Material Icons হল Google Material Design এর একটি গুরুত্বপূর্ণ অংশ যা ওয়েবসাইট বা অ্যাপের ডিজাইনকে আরো আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে। Materialize CSS ফ্রেমওয়ার্কে Material Icons ব্যবহার করা সহজ, এবং এটি আপনাকে কোডের মাধ্যমে নানা ধরনের আইকন যুক্ত করার সুযোগ দেয়। আইকনগুলোর মাধ্যমে আপনি আপনার ওয়েব পেজের অভিজ্ঞতা আরো উন্নত করতে পারেন, যা ইউজারদের জন্য একটি কার্যকরী এবং সুন্দর ইন্টারফেস তৈরি করবে।
Read more
