কৌণিক পদার্থ আইকন কাজ করছে না

Question 1

আমি কৌণিক জন্য উপাদান ইনস্টল করেছি,

আমি আমার অ্যাপ্লিকেশন মডিউলটি ম্যাটিকোন মড্যুলায় (সহ import { MatIconModule } from '@angular/material/icon';) আমদানি করেছি

আমি এটিকে আমার এনজিএমডিউল আমদানির সাথে যুক্ত করেছি:

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

আমি সমস্ত স্টাইলশিট আমদানি করেছি

এবং আমি এটিকে আমার অ্যাপ উপাদানটিতে আমদানি করেছি যা আসলে তাদের ব্যবহার করার চেষ্টা করছে ( import {MatIconModule} from '@angular/material/icon';এর শুরুতে অন্য লাইনের সাথে )।

তবে উপাদান আইকন এখনও প্রদর্শিত হয় না।

উদাহরণস্বরূপ, এই লাইন সহ:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

আমি এই জাতীয় কিছু প্রত্যাশা করছি:

তবে আমি এটি পেয়েছি:

কোন পরামর্শ আছে?

Question 2

উপাদান আইকনগুলির জন্য সিএসএস স্টাইলশিট যুক্ত করুন!

আপনার সূচক html এ নিম্নলিখিতগুলি যুক্ত করুন:

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

উল্লেখ করুন - https://github.com/angular/matory2/issues/7948

Question 3

কৌণিক 6+ এর জন্য:

এনপিএম এটি ইনস্টল করুন: npm install material-design-icons

কৌনিক.জসনে শৈলী যুক্ত করুন:

"styles": [
  "node_modules/material-design-icons/iconfont/material-icons.css"
]

Question 4

যদি SASS ব্যবহার করা হয় তবে আপনার কেবলমাত্র আপনার প্রধান .scssফাইলটিতে এই লাইনটি যুক্ত করতে হবে:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

আপনি যদি গুগল থেকে আইকনগুলি আনা এড়াতে পছন্দ করেন তবে আপনি উপাদান আইকন গাইডে বর্ণিত আইকনগুলিকে স্ব-হোস্ট করতে পারেন :

ওয়েব ফন্টটি স্ব-হোস্ট করার জন্য যারা খুঁজছেন তাদের জন্য কিছু অতিরিক্ত সেটআপ প্রয়োজন। আইকন ফন্টটি কোনও স্থানে হোস্ট করুন, উদাহরণস্বরূপ https://example.com/matory-icons.woff এবং নিম্নলিখিত সিএসএস বিধি যুক্ত করুন:
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
এছাড়াও, আইকনটি উপস্থাপনের জন্য সিএসএসের নিয়মগুলি হ'ল ফন্টটি রেন্ডার করার জন্য ঘোষণা করতে হবে declared এই বিধিগুলি সাধারণত গুগল ওয়েব ফন্ট স্টাইলশিটের অংশ হিসাবে পরিবেশন করা হয় তবে ফন্টটি স্ব-হোস্টিংয়ের সময় আপনার প্রকল্পগুলিতে ম্যানুয়ালি অন্তর্ভুক্ত করা দরকার:
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Question 5

আপনার অবশ্যই ম্যাট আইকনমডিউল আমদানি করতে হবে এবং সূচি html এ নিম্নলিখিত url ব্যবহার করতে হবে

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

Question 6

আমার ক্ষেত্রে, একটি স্টাইল প্রয়োগ করা হয়েছিল যা ফন্ট পরিবারকে ওভাররাইড করে। সুতরাং, আমি হ'ল ফন্টের পারিবারিক স্টাইলকে স্পষ্টভাবে এইভাবে যুক্ত করেছি:

.material-icons{
    font-family: 'Material Icons' !important;
}

Question 7

সম্পূর্ণ সমাধানটি হতে পারে:

প্রথম ধাপ

আপনাকে MatIconModuleআপনার প্রকল্পে আমদানি করতে হবে , আমার প্রকল্পে আমি একটি পৃথক ফাইলে প্রয়োজনীয় উপাদানটি আমদানি করি তারপরে আমি এটিকে অ্যাপমোডুলে আমদানি করি, আপনি এটি ব্যবহার করতে পারেন বা এগুলি সরাসরি আমদানি করতে পারেন:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

ধাপ দুই

আপনার আইকন ফন্টটি লোড করুন index.html:

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

Question 8

আমার ক্ষেত্রে, আমি যে আইকন নামটি লিখেছি তা কোনও আইকনের সাথে সম্পর্কিত ছিল না।

আপনি এখানে সঠিক নামগুলি দেখতে পারেন: https://matory.io/tools/icons/?style=baseline

Question 9

আমার ক্ষেত্রে আইকনগুলি প্রদর্শিত হয়নি কারণ আমি গুরুত্বপূর্ণ! ব্যবহার করে আমার ফন্টগুলি স্ক্রু করেছি। এটি গ্রহণের ফলে আইকনগুলি প্রদর্শিত হয়েছিল।

Question 10

আমি আমার জন্য প্রদর্শিত না আইকন ইস্যু মধ্যে দৌড়ে। বাসভরাজ ভূসানীর দেওয়া পদক্ষেপগুলি আমি অনুসরণ করেছি তবে এখনও কাজ করছে না।

আমি সমস্যাটি খুঁজে পেলাম যে আমার স্ক্যাসে আমার কাছে text-transform: uppercaseআইকনটি কেবল 'অ্যারো_ ফরোয়ার্ড' সামগ্রী প্রদর্শন করবে। আমাকে text-transform: noneআইকনটি পরিবর্তন করতে হয়েছিল বিশেষত অন্যথায় এটি রেন্ডার না করে।

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Question 11

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

এনপিএম

npm install --save hammerjs

সুতা

yarn add hammerjs

ইনস্টল করার পরে এটি আপনার অ্যাপ্লিকেশানের প্রবেশ পয়েন্টে (যেমন src / main.ts) আমদানি করুন।

import 'hammerjs';

যদি আপনি গুগল সিডিএন ব্যবহার করতে পছন্দ করেন তবে দয়া করে আরও ব্যাখ্যার জন্য কৌণিক উপাদানটি দেখুন https://matory.angular.io/guide/getting-st সূত্র

Question 12

ভুল আইকন নাম : কিছু উপাদান আইকন নাম ভুল।

উদাহরণস্বরূপ : উপাদান আইকন এর জন্য ফিল্টার_াল্ট সরবরাহ করে

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

কিন্তু এটি দেখায় 😟

ফিক্স: ফানেল টাইপ আইকন হিসাবে আমাদের ফিল্টার_লিস্ট_াল্ট ব্যবহার করতে হবে

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Question 13

আপনি যদি কিছু বিদ্যমান কৌণিক পদার্থের স্টাইলিং বা অন্য কোনও স্টাইলকে ওভাররাইট করেছেন যা কোনওভাবে আইকনকে প্রভাবিত করে, এটি সমস্যার কারণ হতে পারে। যে কোনও স্টাইলিং এবং পরীক্ষার বাইরে আইকন কোডটি সরান।

আমার জন্য এটি হরফ-বৈকল্পিক ছিল: ছোট ক্যাপস;

সুতরাং আমি এটি কেবলমাত্র শিশু উপাদানটিতে স্থানান্তরিত করেছি। নীচে কৌণিক পদার্থ গ্রিডের একটি অংশ রয়েছে।

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Question 14

কেবলমাত্র আপনার সূচক html এ নিম্নলিখিতগুলি যুক্ত করুন:

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

Question 15

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}