নতুন মেটালিয়াল ডিজাইনের আইকন থিমগুলি কীভাবে ব্যবহার করবেন: রূপরেখা, বৃত্তাকার, দ্বি টোন এবং তীক্ষ্ণ?

Question

গুগল 4 টি নতুন প্রিসেট থিম সহ তার মেটেরিয়াল ডিজাইন আইকনগুলি পুনঃনির্মাণ করেছে :

নিয়মিত ভরাট / বেসলাইন থিম ছাড়াও রূপরেখা, গোল, দ্বি-স্বর এবং তীক্ষ্ণ :

---

তবে, দুর্ভাগ্যক্রমে, এটি নতুন থিমগুলি কীভাবে ব্যবহার করতে হবে তা কোথাও বলে নি।

---

আমি লিঙ্কটি অন্তর্ভুক্ত করে এটি গুগল ওয়েব ফন্টের মাধ্যমে ব্যবহার করছি :

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

এবং তারপরে ডকুমেন্টেশনের পরামর্শ অনুযায়ী প্রয়োজনীয় আইকনটি ব্যবহার করুন :

<i class="material-icons">account_balance</i>

তবে এটি সর্বদা 'ভরাট / বেসলাইন' সংস্করণ দেখায়।

---

পরিবর্তে আউটলাইন করা থিমটি ব্যবহার করার জন্য আমি নিম্নলিখিতগুলি করার চেষ্টা করেছি :

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

এবং, ওয়েব ফন্টের লিঙ্কটি এতে পরিবর্তন করে:

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

ইত্যাদি। কিন্তু এটি কাজ করে না।

---

এবং অন্ধকারের মতো শট নেওয়ার কোনও মানে নেই।

---

tl; dr: কেউ কি নতুন থিমগুলি ব্যবহার করার চেষ্টা করেছেন? এটি এমনকি বেসলাইন সংস্করণ (ইনলাইন এইচটিএমএল ট্যাগ) এর মতোও কাজ করে? বা, এটি কি কেবল এসভিজি বা পিএনজি ফর্ম্যাট হিসাবে ডাউনলোড করার অর্থ?

আগাম ধন্যবাদ.

Answer 1

আপডেট (31/03/2019): সমস্ত আইকন থিম এখন গুগল ওয়েব ফন্টের মাধ্যমে কাজ করে।

এড্রিক দ্বারা নির্দেশিত হিসাবে, এটি এখন আপনার ডকুমেন্টের মাথায় গুগল ওয়েব ফন্ট লিঙ্ক যুক্ত করার বিষয়, যেমন:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

এবং তারপরে একটি নির্দিষ্ট থিমের আইকন আউটপুটে সঠিক শ্রেণি যুক্ত করা।

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

সিএসএস ব্যবহার করে আইকনের রঙও পরিবর্তন করা যেতে পারে।

দ্রষ্টব্য: টু-টোন থিম আইকনগুলি বর্তমানে কিছুটা চটকদার।

---

আপডেট (14/11/2018): 16 _ আউটলাইন আইকনগুলির তালিকা যা "_ আউটলাইন" প্রত্যয় সহ কাজ করে।

_আউটলাইন প্রত্যয় (পরীক্ষিত এবং নিশ্চিত) ব্যবহার করে নিয়মিত ম্যাটারিয়াল-আইকন ওয়েবফন্টের সাথে কাজ করা 16 আউটলাইন আইকনগুলির সর্বাধিক সাম্প্রতিক তালিকা এখানে ।

(যেমনটি উপাদান-নকশা-আইকনগুলি গিথুব পৃষ্ঠায় পাওয়া যায় for এর জন্য অনুসন্ধান করুন: " _outline_24px.svg ")

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i> 

লক্ষ্য করুন pie_chart চাহিদা হতে " pie_chart_ রূপরেখা " এবং না রূপরেখা ।

---

একটি ইনলাইন ট্যাগ ব্যবহার করে নতুন আইকন থিমগুলি পরীক্ষা করার জন্য এটি একটি হ্যাক। এটি সরকারী সমাধান নয়।

আজকের হিসাবে (19 জুলাই, 2018), নতুন আইকন থিমগুলি চালু হওয়ার 2 মাসেরও বেশি সময় পরে, ইনলাইন ট্যাগ ব্যবহার করে এই আইকনগুলিকে অন্তর্ভুক্ত করার কোনও উপায় নেই<i class="material-icons"></i> ।

মার্টিন উল্লেখ করেছেন যে গিথুবকে নিয়ে এ সংক্রান্ত একটি সমস্যা উত্থাপিত হয়েছে: https://github.com/google/matory-design-icons/issues/773

সুতরাং, যতক্ষণ না গুগল এর সমাধান নিয়ে আসে, আমি এসভিজি বা পিএনজি হিসাবে উপযুক্ত আইকনগুলি ডাউনলোড করার আগে আমার বিকাশের পরিবেশে এই নতুন আইকন থিমগুলি অন্তর্ভুক্ত করার জন্য একটি হ্যাক ব্যবহার শুরু করেছি । এবং আমি ভেবেছিলাম এটি আপনার সবার সাথে ভাগ করে নেব।

---

গুরুত্বপূর্ণ : এটি একটি উত্পাদন পরিবেশে ব্যবহার করবেন না কারণ গুগল থেকে অন্তর্ভুক্ত প্রতিটি সিএসএস ফাইলের আকার 1MB এর বেশি।

---

গুগল তাদের ডেমো পৃষ্ঠায় আইকনগুলি প্রদর্শন করতে এই স্টাইলশিটগুলি ব্যবহার করে:

রূপরেখা:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

বৃত্তাকার:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

দুই স্বন:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

আকস্মাত্:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

এই ফাইলগুলির প্রত্যেকটিতে ব্যাকগ্রাউন্ড-চিত্রগুলি (বেস 64 ইমেজ-ডেটা) হিসাবে অন্তর্ভুক্ত সম্পর্কিত থিমগুলির আইকন রয়েছে। এবং এখানে আমরা উত্পাদন পরিবেশে ব্যবহারের জন্য এটি ডাউনলোড করার আগে আমাদের ডিজাইনের কোনও নির্দিষ্ট আইকনটির সামঞ্জস্যতা পরীক্ষা করার জন্য এটি কীভাবে ব্যবহার করতে পারি তা এখানে।

---

পদক্ষেপ 1 :

আপনি যে থিমটি ব্যবহার করতে চান তার স্টাইলশিট অন্তর্ভুক্ত করুন। উদাহরণস্বরূপ: 'আউটলাইন করা' থিমের জন্য, 'আউটলাইন.css' এর জন্য স্টাইলশিটটি ব্যবহার করুন

পদক্ষেপ 2 :

আপনার নিজস্ব স্টাইলশিটে নিম্নলিখিত ক্লাসগুলি যুক্ত করুন :

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

পদক্ষেপ 3 :

নিম্নলিখিত যোগ করে আইকনটি ব্যবহার ক্লাস করার <i>ট্যাগ:

1) material-icons-newক্লাস

2) উপাদান আইকন ডেমো পৃষ্ঠায় প্রদর্শিত আইকনের নাম, হাইফেনের পরে থিমের নামের সাথে উপসর্গযুক্ত।

উপসর্গ:

রূপরেখা: outline-

বৃত্তাকার: round-

দুই স্বন: twotone-

আকস্মাত্: sharp-

যেমন ('ঘোষণা' আইকনের জন্য):

outline-announcement, round-announcement, twotone-announcement,sharp-announcement

3) icon-whiteকালো থেকে সাদা রঙ অন্ধকারের জন্য darkচ্ছিক তৃতীয় শ্রেণীর ব্যবহার করুন (গা dark় ব্যাকগ্রাউন্ডের জন্য)

---

আইকনের আকার পরিবর্তন করা হচ্ছে:

যেহেতু এটি একটি পটভূমি-চিত্র এবং কোনও ফন্ট-আইকন নয়, তাই আইকনগুলির আকার পরিবর্তন করতে CSS এর বৈশিষ্ট্য heightএবং widthবৈশিষ্ট্যগুলি ব্যবহার করুন । ডিফল্টটি material-icons-newক্লাসে 24px তে সেট করা আছে ।

---

উদাহরণ:

কেস আমি: জন্য আউটলাইন করা থিম account_circle আইকন:

1) স্টাইলশিট অন্তর্ভুক্ত করুন:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) আপনার পৃষ্ঠায় আইকন ট্যাগ যুক্ত করুন:

<i class="material-icons-new outline-account_circle"></i>

Ptionচ্ছিক (অন্ধকার ব্যাকগ্রাউন্ডের জন্য):

<i class="material-icons-new outline-account_circle icon-white"></i>

---

কেস ২: জন্য আকস্মাত্ থিম মূল্যায়ন আইকন:

1) স্টাইলশিট অন্তর্ভুক্ত করুন:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) আপনার পৃষ্ঠায় আইকন ট্যাগ যুক্ত করুন:

<i class="material-icons-new sharp-assessment"></i>

(অন্ধকার ব্যাকগ্রাউন্ডের জন্য):

<i class="material-icons-new sharp-assessment icon-white"></i>

---

আমি যথেষ্ট চাপ দিতে পারি না যে এটি আপনার উত্পাদনের পরিবেশে আইকনগুলি অন্তর্ভুক্ত করার সঠিক উপায় নয়। তবে আপনি যদি আপনার ইন-ডেভলপমেন্ট পৃষ্ঠায় একাধিক আইকন দিয়ে স্ক্যান করতে চান তবে এটি আইকনটি অন্তর্ভুক্তিটিকে বেশ সহজ করে তোলে এবং অনেক সময় সাশ্রয় করে।

সাইট-স্পিড অপ্টিমাইজেশনের ক্ষেত্রে আইকনটি এসভিজি বা পিএনজি হিসাবে ডাউনলোড করা নিশ্চিত করা আরও ভাল বিকল্প, তবে প্রোটোটাইপিং পর্যায়ে আসে এবং কোনও নির্দিষ্ট আইকন আপনার নকশা ইত্যাদির সাথে যায় কিনা তা পরীক্ষা করে ফন্ট-আইকনগুলি একটি সময় সাশ্রয়ী হয় etc.

---

গুগল যদি এই সমস্যার সমাধান নিয়ে আসে তবে যখন ব্যবহারের জন্য কোনও আইকন ডাউনলোড করা জড়িত না তখন আমি এই পোস্টটি আপডেট করব।

Comments

হ্যালো! এটি বেশ কার্যকর, তবে আমি এখনও আমার আইকনটি অন্তর্ভুক্ত করতে সক্ষম হই না, আমি স্ক্রিন_শায়ার অন্তর্ভুক্ত করতে চাই, ক্লাসের সাথে চেষ্টা করেছি outআউটলাইন-স্ক্রিন_শায়ার তবে এটি কিছু মুদ্রণ করে না, আমি পরিদর্শককে ক্লাস চেক করেছি এবং এটি বিদ্যমান আছে, আমি হারিয়ে যেতে পারি কোন পদক্ষেপ?

— cucuru

@ কাকুরু ধন্যবাদ, আমি মনে করি আপনি দ্বিতীয় ধাপ মিস করেছেন । .material-icons-newআপনার নিজের স্টাইলশিটে প্রথমে শ্রেণি এবং তার বৈশিষ্ট্য যুক্ত করা এবং তারপরে আইকনটি কল করা <i class="material-icons-new outline-screen_share"></i>।

— আশিল জন

নতুন মেটেরিয়াল আইকন থিমগুলির জন্য এখন নতুন সিএসএস ফন্ট রয়েছে বলে মনে হচ্ছে: কোডেপেন.আইও

— এড্রিক

গ্রেট! একটি যাদুমন্ত্র মত কাজ করে.

— সূর্য্য

কৌণিক পদার্থের জন্য, আপনার fontSetপরিবর্তে ব্যবহার করতে হবে class। রন নেটজারের উত্তরটি 8/14/19 থেকে নীচে দেখুন।

— রাশ

Answer 2

27 ফেব্রুয়ারী 2019 পর্যন্ত, নতুন ম্যাটারিয়াল আইকন থিমগুলির জন্য সিএসএস ফন্ট রয়েছে।

তবে, ফন্টগুলি ব্যবহার করতে আপনাকে সিএসএস ক্লাস তৈরি করতে হবে।

ফন্ট পরিবারগুলি নিম্নরূপ:

• Material Icons Outlined - আউটলাইন করা আইকনগুলি
• Material Icons Two Tone - দ্বি-স্বরের আইকন
• Material Icons Round - বৃত্তাকার আইকন
• Material Icons Sharp - তীক্ষ্ণ আইকন

উদাহরণের জন্য নীচের কোড নমুনা দেখুন:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

অথবা কোডেপেনে দেখুন

---

সম্পাদনা: 10 মার্চ 2019 হিসাবে, দেখা যাচ্ছে যে নতুন ফন্ট আইকনগুলির জন্য এখন ক্লাস রয়েছে:

body {
  font-family: Roboto, sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

সম্পাদনা # 2: সিএসএস চিত্র ফিল্টার ( এই মন্তব্য থেকে অভিযোজিত কোড ) ব্যবহার করে দ্বি-স্বর আইকনগুলি রঙ করার জন্য এখানে একটি কার্যকারিতা রয়েছে :

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

অথবা কোডেপেনে দেখুন

Comments

এটি প্রদর্শিত হয় যে colorসিএসএস অ্যাট্রিবিউটটি বর্তমানে নতুন ম্যাটারিয়াল আইকন থিমগুলির রঙকে প্রভাবিত করে না।

— এড্রিক

বাহ্যরে চিহ্নিত আইকন কাজ করছে না?, কোন চিন্তা?

— জিসমন টমাস

এটি মোটেও প্রদর্শিত হবে না, এমনকি আপনি যদি এই পৃষ্ঠাটি চালান অর্থাত্, আপনি দেখতে পাচ্ছেন যে এটি কেবল ফাঁকা জায়গা, আমি বেসলাইনটি ব্যবহার করে শেষ করেছি!

— জিসমন থমাস

দেখা যাচ্ছে যে colorসম্পত্তিটি দ্বি-স্বর আইকন বাদে সমস্ত আইকনে সমর্থিত। (আজ হিসাবে পরীক্ষিত)

— এড্রিক

Answer 3

কৌণিক উপাদানের জন্য আপনার ফন্ট পরিবার পরিবর্তন করতে ফন্টসেট ইনপুট ব্যবহার করা উচিত:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

Answer 4

আপনার ওয়েব প্রোজেক্টে ইতিমধ্যে যদি উপাদান-আইকনগুলি কাজ করে থাকে, কেবলমাত্র এইচটিএমএল ফাইলটিতে আপনার রেফারেন্স এবং আইকনগুলির জন্য ব্যবহৃত শ্রেণিটি আপডেট করতে হবে:

এইচটিএমএল রেফারেন্স:

আগে

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

পরে

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

উপাদান আইকন শ্রেণি:

এরপরে উইচ ক্লাসের নামটি যাচাই করুন আপনি কী ব্যবহার করছেন:

আগে:

<i className="material-icons">weekend</i>

পরে:

<i className="material-icons-outlined">weekend</i>

যে আমার জন্য কাজ করে ... পুর ভিদা!

Answer 5

আমার জন্য যা কাজ করেছে তা হল আইকন নামের পরে _আউটলাইন নয়_আউটলাইন ডি ব্যবহার করা using

<mat-icon>info</mat-icon>

বনাম

<mat-icon>info_outline</mat-icon>

Comments

আহ-হাহ, সুতরাং এটি কৌণিকভাবে সেভাবে কাজ করে; এটা বেশ ঝরঝরে।

— আশিল জন

কিছু আইকন রয়েছে যা বাহ্যরেখায় রয়েছে এবং এর প্রত্যয় _ আউটলাইন রয়েছে। এটি কেবল তাদের জন্যই কাজ করে

— সঙ্গমিন লি

হ্যাঁ, এটি কাজ করতে হবে এমন আইকনগুলির তালিকা @ material.io/tools/icons/?style=outline

— fxrxz

@ Aj334 হ্যাঁ এটি পরিষ্কার, আপনি যদি এই উত্তরটি আপনার প্রশ্নের উত্তর দিয়ে থাকেন তবে আপনি কি এই উত্তরটি গ্রহণ করতে পারবেন?

— fxrxz

আমি কেবল এটি একটি রিঅ্যাক্ট.জেএস প্রকল্পে প্লেইন ম্যাটারিয়াল ওয়েব ফন্টের সাথে ব্যবহার করেছি। সুতরাং এটি কৌনিক সঙ্গে কিছু করার নেই। আমি মনে করি এটিই সমাধান।

— জুলু

Answer 6

12/05/2020 পর্যন্ত, আপনার প্রয়োজন

1. সিএসএস অন্তর্ভুক্ত:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

২. এটি ব্যবহার করুন:

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

দ্রষ্টব্য: উদাহরণস্বরূপ, বাহ্যরেখা করা শৈলী ব্যবহার করতে আপনাকে উপাদান-আইকন এবং উপাদান-আইকন-রূপরেখার শ্রেণি নির্দিষ্ট করতে হবে ।

Comments

কৌণিক জন্য, ব্যবহার করুন <mat-icon class="material-icons-two-tone">alarm</mat-icon>। সঙ্গে পারেন বর্গ প্রতিস্থাপন material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpবা material-icons-round। এবং অ্যালার্মটি যে কোনও আইকন নামের থেকে: প্রতিস্থাপন করুন: উপাদান.

— io

মাদুর-আইকন ব্যবহার করার অর্থ, আপনি অতিরিক্ত মডিউল যুক্ত করছেন, যা অ্যাপের আকার বাড়ায় (ভাল, এটি কিছুটা বাড়ায় তবে কখনও কখনও কয়েকটি কেবি গুরুত্বপূর্ণ)

— ভানো মাইসুরাদজে

@ ভ্যানোমাইসুরাদজে আপনি কি ডকের সাথে লিঙ্ক করতে পারবেন?

— মেহুলকুমার

আফাইক, এর জন্য কোনও ডক নেই।

— ভানো মাইসুরাদজে

Answer 7

নতুন থিমগুলি সম্ভবত ম্যাটারিয়াল আইকন ফন্টের অংশ নয় (এখনও?) লিঙ্ক ।

Comments

এই প্রকল্পটি 2 বছরে একটি প্রকাশ প্রকাশ করেনি, আমি আমার নিশ্বাস ফেলছি না।

— কোডার

Answer 8

Aj334 এর সাম্প্রতিক সম্পাদনাটি পুরোপুরি কাজ করে।

গুগল সিডিএন

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

আইকন উপাদান

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

Answer 9

এখনও অবধি কোনও উত্তর কীভাবে সেই ফন্টের বিভিন্ন রূপগুলি ডাউনলোড করবেন তা ব্যাখ্যা করে না যাতে আপনি সেগুলি আপনার নিজের ওয়েবসাইট (ডাব্লুডাব্লুডাব্লু সার্ভার) থেকে পরিবেশন করতে পারেন।

প্রযুক্তিগত দৃষ্টিকোণ থেকে এটি যদি কোনও ছোটখাটো ইস্যু বলে মনে হতে পারে তবে আইনী দৃষ্টিকোণ থেকে এটি একটি বড় বিষয়, যদি আপনি কোনও ইউরোপীয় ইউনিয়নের নাগরিকের কাছে নিজের পৃষ্ঠাগুলি উপস্থাপন করতে চান তবে (বা এমনকি যদি আপনি এটি দুর্ঘটনাক্রমে করেন)। এমনকি মার্কিন যুক্তরাষ্ট্রে বসবাসকারী সংস্থাগুলির (বা ইইউর বাইরে যে কোনও দেশ) এটি সত্য true

এটি কেন কারও যদি আগ্রহী হয় তবে আমি এই উত্তরটি আপডেট করব এবং এখানে আরও কিছু বিবরণ দেব তবে এই মুহুর্তে আমি অফ-টপিকের চেয়ে বেশি জায়গা নষ্ট করতে চাই না।

এই কথা বলে:

আমি খুব সহজ দুটি পদক্ষেপ অনুসরণ করে ফন্টের সমস্ত সংস্করণ (নিয়মিত, রূপরেখাযুক্ত, বৃত্তাকার, তীক্ষ্ণ, দ্বি-স্বন) ডাউনলোড করেছি (এটি @ আজ334 এর নিজের প্রশ্নের উত্তর যা আমাকে সঠিক পথে ফেলেছিল) (উদাহরণ: "আউটলাইন করা "বৈকল্পিক):

1. আপনার ব্রাউজারকে সরাসরি সিএসএস ইউআরএল আনতে দিয়ে গুগল সিডিএন থেকে সিএসএস পান , অর্থাত আপনার ব্রাউজারের অবস্থান বারে নীচের URL টি অনুলিপি করুন:

   https://fonts.googleapis.com/css?family=Material+Icons+Outlined
   

   এটি এমন একটি পৃষ্ঠায় ফিরে আসবে যা দেখে মনে হবে (কমপক্ষে ফায়ারফক্সে 70.0.1 এ লেখার সময়):

   /* fallback */
   @font-face {
     font-family: 'Material Icons Outlined';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
   }
   
   .material-icons-outlined {
     font-family: 'Material Icons Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
     -moz-font-feature-settings: 'liga';
     -moz-osx-font-smoothing: grayscale;
   }
   

2. src:উপরের কোডটি দিয়ে শুরু হওয়া লাইনটি সন্ধান করুন এবং আপনার ব্রাউজারটিকে সেই লাইনে থাকা URL টি আনতে দিন , যেমন নীচের URL টি আপনার ব্রাউজারের অবস্থান বারে অনুলিপি করুন:

   https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
   

   এখন ব্রাউজারটি সেই .woff2ফাইলটি ডাউনলোড করবে এবং স্থানীয়ভাবে এটি সংরক্ষণের প্রস্তাব দেবে (কমপক্ষে, ফায়ারফক্স করেছে)।

দুটি চূড়ান্ত মন্তব্য:

অবশ্যই, আপনি একই পদ্ধতি ব্যবহার করে font ফন্টের অন্যান্য রূপগুলি ডাউনলোড করতে পারেন। প্রথম ধাপে, কেবলমাত্র Outlinedইউআরএলটিতে অক্ষর অনুসারে অক্ষরের অনুক্রমগুলি প্রতিস্থাপন করুন Round(হ্যাঁ, সত্যই, যদিও এখানে এটি বাম নেভিগেশন মেনুতে "গোলাকার" বলা হয়), Sharpবা Two+Toneযথাক্রমে। ফলাফল পৃষ্ঠাটি প্রতিবার প্রায় একই রকম দেখাবে, তবে src:অবশ্যই প্রতিটি লাইনের ইউআরএল পৃথক।

অবশেষে, পদক্ষেপ 1 এ, আপনি এমনকি এই URL টি ব্যবহার করতে পারেন:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

এটি এক পৃষ্ঠায় সমস্ত ভেরিয়েন্টের জন্য সিএসএস ফিরিয়ে দেবে, যারপরে পাঁচটি src:লাইন রয়েছে, যার প্রত্যেকটিতে অন্য URL টি নির্ধারণ করে যেখানে সম্পর্কিত ফন্টটি রয়েছে।

Answer 10

ওয়েবফন্টস লিঙ্কটি এখন সমস্ত ব্রাউজারে কাজ করে!

|এই জাতীয় পাইপ দ্বারা আলাদা করে ফন্ট লিঙ্কে কেবল আপনার থিমগুলি যুক্ত করুন

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

তারপরে ক্লাসটি উল্লেখ করুন:

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

এই প্যাটার্নটি কৌনিক উপাদানগুলির সাথেও কাজ করবে:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Comments

অ্যাট্রিবিউট সলিউশনটি বের না হওয়া পর্যন্ত আমি এই সহজ পদ্ধতির সাথে রাখব। ভাল একটি @ আন্তঃগ্যালাকটিক

— স্পার্কার 73 ই

আমি যদি এর dependenciesপরিবর্তে অ্যাপটির প্যাকেজ.জসনের মাধ্যমে আইকনগুলি পাই <link>? আমি ইউআরএলটিতে আউটলাইন করা আইকনগুলি অন্তর্ভুক্ত করব না ...

— জাগো

Answer 11

গুগল শৈলীতে মাথা লিঙ্ক রাখুন

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

এবং শরীরে এই জাতীয় কিছু

<i class="material-icons-outlined">bookmarks</i>

Answer 12

সাম্প্রতিক ওয়েব অ্যাপ্লিকেশন বিল্ডিংয়ের জন্য আমার প্রয়োজনীয় নতুন থিমযুক্ত আইকনগুলি ব্যবহার করে একটি কাস্টম ফন্ট তৈরি করতে আমি আইকোমুন অ্যাপ ব্যবহার করে শেষ করেছি। এটি নিখুঁত নয় তবে আপনি সামান্য কিছু সেটআপ দিয়ে বিদ্যমান গুগল ফন্ট কার্যকারিতা নকল করতে পারেন। এখানে একটি লিখনআপ:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

যদি কেউ সাহস বোধ করে তবে তারা ইকোমুন ব্যবহার করে পুরো থিমটি রূপান্তর করতে পারে। হেল, ইকোমুনের সম্ভবত একটি অভ্যন্তরীণ প্রক্রিয়া রয়েছে যা এটিকে সহজ করে তুলবে কারণ তাদের লাইব্রেরিতে ইতিমধ্যে তাদের মূল উপাদান আইকনগুলি সেট করা আছে।

যাইহোক, এটি একটি নিখুঁত সমাধান নয়, তবে এটি আমার পক্ষে কাজ করেছে।

Answer 13

আমি অসন্তুষ্ট ছিলাম যতক্ষণ না গুগল তাদের নতুন ডিজাইনগুলি ফন্ট বা এসভিজি আইকন সেট হিসাবে প্রকাশ করে নি। সুতরাং আমি সমস্যাটি সমাধানের জন্য একটি ছোট এনপিএম প্যাকেজ একসাথে রেখেছি।

https://www.npmjs.com/package/ts-material-icons-svg

আপনি যে আইকনগুলি ব্যবহার করতে চান তা কেবল আমদানি করুন এবং এগুলি আপনার রেজিস্ট্রিতে যুক্ত করুন। এটি আপনার গাছের কাঁপানো সমর্থন করে যেহেতু আপনার প্রকল্পে কেবল সেই আইকনগুলি যুক্ত করা হয়েছে যা আপনি সত্যিই চান এবং / অথবা প্রয়োজন।

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

উদাহরণস্বরূপ দুটি টোন আইকন ব্যবহার করতে

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

আপনার এইচটিএমএল টেমপ্লেটে আপনি এখন নতুন আইকন ব্যবহার করতে পারেন

<mat-icon svgIcon="edit"></mat-icon>

Answer 14

কিছুটা হাসিখুশিভাবে, গুগল একটি ফন্ট তৈরি করেছে যা সাফারিতে সঠিকভাবে কাজ করে তবে ক্রোমে নয়। এখানে https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

Https://stackoverflow.com/a/54902967/4740291 এবং সিএসএস ব্যবহার করে রঙ পরিবর্তন করতে সক্ষম না হওয়ার প্রসঙ্গে ।

Answer 15

দ্বি-স্বরের রঙ নির্ধারণ:

উপরে বর্ণিত হিসাবে আপনি colorউপকরণ দুটি টোন থিম বাদে সিএসএস কী ব্যবহার করতে পারেন যা চটকদার বলে মনে হচ্ছে ;-)

একটি কাস্টম সিএসএস ফিল্টার ব্যবহার করে বেশ কয়েকটি কৌণিক উপাদান গিথুব ইস্যুতে একটিতে ওয়ার্কআরাউন্ড বর্ণনা করা হয় । এই কাস্টম ফিল্টারটি এখানে উত্পাদিত হতে পারে ।

উদাহরণ:

এইচটিএমএল:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

CSS:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

সংযুক্তি:

• ওয়ার্কিং অ্যাংুলার স্ট্যাকব্লিটজ
• কোডপেন উদাহরণ
• কোডেপেন সিএসএস ফিল্টার জেনারেটর