Material Icons গুগলের একটি আইকন সেট যা Material Design নীতির সঙ্গে মানানসই। MDL (Material Design Lite) ফ্রেমওয়ার্কে Material Icons ব্যবহার করে আপনি আপনার ওয়েব পেজে সহজে আইকন যুক্ত করতে পারবেন, যা ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাক্টিভ করে তোলে।
MDL এর সঙ্গে Material Icons ব্যবহার করার জন্য, আপনাকে প্রথমে কিছু সেটআপ করতে হবে। এখানে Material Icons যোগ করার পুরো প্রক্রিয়া ব্যাখ্যা করা হয়েছে।
MDL এর সাথে Material Icons ব্যবহার করার পদ্ধতি
১. Material Icons এর লিঙ্ক যুক্ত করা
Material Icons ব্যবহার করার জন্য প্রথমেই আপনাকে গুগলের আইকন ফন্ট ফাইলটি আপনার HTML ডকুমেন্টে অন্তর্ভুক্ত করতে হবে। এটি সহজেই Google Fonts থেকে লিঙ্ক করা যেতে পারে।
HTML ফাইলে Material Icons লিঙ্ক করার উদাহরণ:
<head>
<!-- Material Icons Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
এই লিঙ্কটি আপনার <head> ট্যাগের মধ্যে যুক্ত করতে হবে। একবার এটি যুক্ত করার পর, আপনি সহজেই Material Icons ব্যবহার করতে পারবেন।
২. MDL কম্পোনেন্টে Material Icons ব্যবহার করা
Material Icons ব্যবহার করতে হলে, আপনি সেগুলোকে HTML ডকুমেন্টে আইকন ক্লাস হিসেবে ব্যবহার করবেন। আইকনগুলো দেখতে খুবই সহজ এবং গুগল কর্তৃক সরবরাহিত একটি স্ট্যান্ডার্ড ফন্ট হিসেবে ব্যবহৃত হয়।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class="material-icons">home</i> Home
</button>
এখানে, <i class="material-icons">home</i> এই কোডটি home নামের একটি Material Icon প্রদর্শন করবে। এই আইকনটি Home বাটনের পাশে থাকবে। Material Icons এর নামগুলি খুব সোজা, যেমন home, search, add, delete, ইত্যাদি।
৩. Material Icons কাস্টমাইজেশন
Material Icons বিভিন্ন সাইজ এবং রঙে কাস্টমাইজ করা যেতে পারে। MDL এর সাথে এগুলো ব্যবহার করার জন্য আপনি CSS ব্যবহার করে আইকনের আকার, রঙ এবং অবস্থান কাস্টমাইজ করতে পারেন।
উদাহরণ:
<i class="material-icons" style="font-size: 48px; color: red;">star</i>
এখানে, star আইকনটি ৪৮ পিক্সেল আকারে এবং লাল (red) রঙে প্রদর্শিত হবে।
৪. MDL এর বাটনে আইকন ব্যবহার
Material Icons সাধারণত MDL এর কম্পোনেন্টগুলির সঙ্গে ব্যবহৃত হয়, যেমন বাটন, ডায়ালগ, টুলবার ইত্যাদির সাথে। MDL বাটনের মধ্যে আইকন ব্যবহারের উদাহরণ দেখুন:
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">add</i>
</button>
এখানে, add আইকন একটি বাটনের মধ্যে ব্যবহার করা হয়েছে। mdl-button--icon ক্লাসটি বাটনকে একটি ছোট আকারে পরিণত করে, যা আইকনকে সুন্দরভাবে প্রদর্শন করবে।
৫. আইকন টুলটিপের সাথে ব্যবহার
MDL আপনাকে টুলটিপ (tooltip) সমর্থনও প্রদান করে, যা ব্যবহারকারীর জন্য আইকনের উদ্দেশ্য বোঝাতে সহায়তা করে। আপনি Material Icons এর সাথে টুলটিপ ব্যবহার করতে পারেন।
উদাহরণ:
<button class="mdl-button mdl-js-button mdl-button--icon" data-mdl-for="tooltip-1">
<i class="material-icons">info</i>
</button>
<span class="mdl-tooltip" for="tooltip-1">Info Icon</span>
এখানে, info আইকনের উপর মাউস রেখে, ব্যবহারকারী একটি টুলটিপ দেখতে পাবেন, যা আইকনের উদ্দেশ্য ব্যাখ্যা করে।
সারাংশ
MDL (Material Design Lite) এর সাথে Material Icons ব্যবহার করা খুবই সহজ এবং এটি আপনার ওয়েবসাইটের ডিজাইনকে আরো আকর্ষণীয় এবং ইন্টারঅ্যাক্টিভ করে তোলে। Material Icons গুগলের একটি সুন্দর এবং সিম্পল আইকন ফন্ট সেট যা MDL এর সাথেও সহজে ইন্টিগ্রেট করা যায়। আপনি আইকনগুলি বিভিন্ন আকারে, রঙে এবং স্টাইলে কাস্টমাইজ করতে পারেন। MDL এর বাটন, টুলবার, ডায়ালগ ইত্যাদির সাথে আইকন ব্যবহার করে আপনার ওয়েব পেজকে আরো কার্যকরী এবং ব্যবহারকারী বান্ধব বানানো যায়।
Read more
