কৌণিক পদার্থে <md-icon> কীভাবে ব্যবহার করবেন?

Question

আমি ভাবছিলাম কীভাবে উপাদানগুলির আইকনগুলি ব্যবহার করবেন, কারণ এটি কাজ করছে না:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

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

Answer 1

অন্যান্য উত্তরগুলি আমার উদ্বেগের সমাধান না করায় আমি নিজের উত্তরটি লেখার সিদ্ধান্ত নিয়েছি।

md-iconনির্দেশিকার আইকন বৈশিষ্ট্যে প্রদত্ত পাথটি হল আপনার স্থির ফাইল ডিরেক্টরিতে কোথাও থাকা .png বা .svg ফাইলের URL। সুতরাং আপনাকে আইকন বৈশিষ্ট্যে সেই ফাইলটির সঠিক পথ রাখতে হবে। পিএস ফাইলটি সঠিক ডিরেক্টরিতে রেখেছিল যাতে আপনার সার্ভার এটি পরিবেশন করতে পারে।

মনে রাখবেন md-iconবুটস্ট্র্যাপ আইকনের মতো নয়। বর্তমানে তারা কেবলমাত্র একটি ডিরেক্টরি যা একটি .svg ফাইল দেখায়।

হালনাগাদ

এই প্রশ্নটি পোস্ট করার পরে কৌণিক উপাদানের নকশা অনেক পরিবর্তন হয়েছে।

এখন ব্যবহার করার বিভিন্ন উপায় রয়েছে md-icon

প্রথম উপায় হ'ল এসভিজি আইকনগুলি ব্যবহার করা।

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

উদাহরণ:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

অথবা

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

: যেখানে getMyIconএকটি পদ্ধতি সংজ্ঞায়িত করা হয় $scope।

অথবা <md-icon md-svg-icon="social:android"></md-icon>

এটি ব্যবহার করতে আপনাকে $mdIconProviderএসভিজি আইকনসেটগুলি সহ আপনার অ্যাপ্লিকেশনটি কনফিগার করতে পরিষেবাতে থাকতে হবে।

angular.module('appSvgIconSets', ['ngMaterial'])  
  .controller('DemoCtrl', function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);    
  });

দ্বিতীয় উপায় হ'ল ফন্ট আইকন ব্যবহার করা।

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

এটি করার পূর্বে আপনাকে ফন্ট লাইব্রেরিটি এভাবে লোড করতে হবে ..

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

বা লিগচারের সাথে ফন্ট আইকন ব্যবহার করুন

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

আরও তথ্যের জন্য আমাদের পরীক্ষা করুন

কৌণিক পদার্থ mdIcon ডাইরেক্টিভ ডকুমেন্টেশন

d এমডি আইকন পরিষেবা ডকুমেন্টেশন

d mdIconProvider পরিষেবা ডকুমেন্টেশন

Comments

লিগচার সম্পর্কে দ্রুত নোট: হাইফেনের পরিবর্তে আন্ডারস্কোর ব্যবহার করুন। এটি সম্ভবত আপনার আরও বিশদ লিঙ্কগুলিতে কোথাও নথিভুক্ত হয়েছে তবে ডাটের জন্য কেউ সময় পান না। ;-)

— ওলসন.দেব

এগুলি রঙ করার উপযুক্ত উপায় কী?

— theblang

@ ম্যাটব্ল্যাং যদি আপনি এগুলিকে হরফ আইকন হিসাবে ব্যবহার করেন তবে এটি কেবল একটি ফন্ট। সুতরাং পাঠ্য রঙটি সিএসএসে সেট করা (যেমন {রঙ: লাল}) এগুলি রঙ করবে।

— tanou

ঠিক আমার যা প্রয়োজন ছিল। ব্যবহার করার সময় আমি স্টাইলের সাথে লড়াই করে যাচ্ছিলাম <i class='material-icons'>icon_name</i>, তবে md-font-libraryআমার সমস্যাটি পুরোপুরি সমাধান করেছি।

— পিটার ভিডিই

এমডি-আইকনে কোনও ভেরিয়েবল ব্যবহার করে এটি কাজ করে না কেন? <এমডি-আইকন এমডি-ফন্ট-লাইব্রেরি = "উপাদান-আইকন"> {{ইউজারআর টাইপ}} </md-icon> .. এই ক্ষেত্রে user.type = "মুখ" এবং একটি পাঠ্য হিসাবে এটি কাজ করে < এমডি-আইকন এমডি-ফন্ট-লাইব্রেরি = "উপাদান-আইকন"> মুখ </

— md-

Answer 2

আজকের সবচেয়ে সহজ উপায় হ'ল গুগল ফন্টগুলি থেকে ম্যাটেরিয়াল আইকন ফন্টের জন্য অনুরোধ করা যেমন উদাহরণস্বরূপ আপনার এইচটিএমএল শিরোনাম ট্যাগে:

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

বা আপনার স্টাইলশিটে:

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

এবং তারপরে এমড -আইকন নির্দেশিকায় বর্ণিত লিগ্যাচার সহ ফন্ট আইকন হিসাবে ব্যবহার করুন । উদাহরণ স্বরূপ:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

আইকন / লিগ্যাচারের সম্পূর্ণ তালিকাটি https://www.google.com/design/icons/ এ রয়েছে

Comments

কিভাবে একটি বোতামে আইকন যুক্ত করবেন?

— আলেকজান্ডার মিলস

Answer 3

এটি আসলে বোর থেকে এখন কাজ করে।

bower install material-design-icons --save

এটি 37.1 কেবি ডাউনলোড করে। তারপরে এটি এক্সট্রাক্ট করে ইনস্টল করে। আপনি bower_comp اجزا ফোল্ডারে উপাদান-নকশা-আইকন নামে একটি ফোল্ডার দেখতে পাবেন। মোট আকার প্রায় 299KBs

Comments

এবং কিভাবে এটি ব্যবহার করবেন?

— আর্নস্ট আর্নস্ট

Answer 4

এমডি-আইকনগুলি কৌণিক-উপাদানের বোরার রিলিজে নেই। আমি পলিমার আইকন ব্যবহার করছি , তারা সম্ভবত যাইহোক একই হবে।

bower install polymer/core-icons

Answer 5

সহজ উপায়: নিম্নলিখিত সিডিএন ব্যবহার করুন:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

আপনার কৌণিক অ্যাপ্লিকেশনটিতে এনজিএমডি আইকনগুলি ইনজেক্ট করুন:

angular.module('demoapp', ['ngMdIcons']);

সিএসএসের মাধ্যমে ভরাট বর্ণ নির্দিষ্ট করে আপনার এইচটিএমএলে এনজি-এমডি-আইকন নির্দেশিকা ব্যবহার করুন:

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

সূত্র: https://klarys.github.io/angular-matory-icons/

Comments

এর বিরক্তিকর ng-mdআইডির বোতামগুলিতে এমড-আইকন যেমন আইকনটিকে কেন্দ্র করে না।

— মোস্তফা

হ্যাঁ একই সমস্যা এখানে। বেশিরভাগ ক্ষেত্রে আপনাকে সিএসএস সহ অবস্থানগুলি পরিমার্জন করতে হবে। position:relative;এবং তারপরে by left-top-right-bottomআপনার পছন্দের আরও ভাল অবস্থানে এসভিজি উপাদান বা ধারক স্থানান্তর করুন ।

— আসকান

Answer 6

তাদের সর্বশেষ প্রকাশে একটি নির্দেশিকা বলা হয়েছে md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Comments

বোর ইনস্টল করুন উপাদান-নকশা-আইকন github.com/google/matory- ডিজাইন-

— neofreko

এটি ডাউনলোড করুন, বোভার ব্যবহার করবেন না। এটি 57 এমবি

— নিউফ্রেখো

Answer 7

এটি লেখার সময় হিসাবে সমস্ত md-উপসর্গ এখন mat-উপসর্গ!

এটি আপনার এইচটিএমএল মাথায় রাখুন:

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

আমাদের মডিউলটিতে আমদানি করুন:

import { MatIconModule } from '@angular/material';

আপনার কোড ব্যবহার করুন:

<mat-icon>face</mat-icon>

এখানে সর্বশেষতম ডকুমেন্টেশন রয়েছে:

https://material.angular.io/components/icon/overview

Comments

ওপি অ্যাঙ্গুলারজেএস মেটেরিয়াল ব্যবহার করছে।

— এড্রিক

Answer 8

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

উত্স: https://matory.angularjs.org/#/demo/matory.compomot.button

Answer 9

সিএসএস এবং ফন্ট একই অবস্থান ব্যবহার করে ব্যবহার করে

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}