सामग्री डिज़ाइन आइकन

Question

के आइकन आकार बदलें मैं तो संदर्भित किया है एक आइकन

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

घोषित लेकिन मैं आइकन आकार कैसे बदल सकते हैं?

ऑफिसियल साइट https://design.google.com/icons/ पर मैं class="md-icon dp48" जैसे वर्गों का उपयोग करके देख सकता हूं लेकिन यह मेरे मामले में काम नहीं कर रहा है।

Answer 1

गीथब में सामग्री डिज़ाइन पढ़कर मुझे ये उपयोगी सामान मिल गया जो आपकी मदद कर सकते हैं।

/* Rules for sizing the icon. */ 
.material-icons.md-18 { font-size: 18px; } 
.material-icons.md-24 { font-size: 24px; } 
.material-icons.md-36 { font-size: 36px; } 
.material-icons.md-48 { font-size: 48px; } 

/* Rules for using icons as black on a light background. */ 
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } 
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } 

/* Rules for using icons as white on a dark background. */ 
.material-icons.md-light { color: rgba(255, 255, 255, 1); } 
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } 

उपरोक्त कोड से, आप बस सामग्री सीएसएस आइकन को बदल या ओवरराइड कर सकते हैं।

नमूना कोड:

<i class="material-icons md-18">face</i> 

अधिक जानकारी here

Answer 2

आप font-size संपत्ति को बदल सकते हैं, यह आइकन पर क्योंकि यह एक "फ़ॉन्ट आइकन"

Answer 3

तो मैं है को प्रतिबिंबित करेगा मैं एक-ऑफ कर रहा हूं, आमतौर पर टैग में फ़ॉन्ट आकार में एक शैली = संशोधन जोड़ता हूं। लेकिन हाँ लंबी कहानी छोटी सी सीएसएस में एक अधिक स्थायी समाधान के रूप में संलग्न करने के लिए अपनी खुद की आकार शैलियों को परिभाषित करने के अलावा इसके लिए कोई असली चाल नहीं है।

<i class="material-icons" style="font-size: 50px">insert_invitation</i> 

Answer 4

आप सामान्य सीएसएस का उपयोग कर सकते हैं, लेकिन साथ इनलाइन स्टाइल को ओवरराइड करना होगा:

font-size: 50px !important;

Answer 5

अगर आप scss

@mixin md-icon-size($size: 24px) { 
    font-size: $size; 
    height: $size; 
    width: $size; 
} 

.md-icon-16 { 
    @include md-icon-size(16px); 
} 

.md-icon-18 { 
    @include md-icon-size(18px); 
} 

.md-icon-24 { 
    @include md-icon-size(24px); 
} 

.md-icon-36 { 
    @include md-icon-size(36px); 
}