PNG dosyası içeren AngularJS Malzeme Simgesi

Question

Şu an AngularJS ile biraz çalışıyorum, ancak Angular ekibinden Material projesine bakmaya başladım. Son 2 gün boyunca Simge yönergesini (https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon) en az PNG dosyaları ile çalışmaya çalışıyorum, ancak çalışamıyorum ... Evet, belgeleri okudum ve hiç bir şey yok PNG'lerin ve yönergelerin sadece SVG ve CSS simgeleriyle çalıştığı görülüyor, ancak hala bir hile olduğunu umuyorum. Yani: AngularJS Malzeme Simgesi yönergesini herhangi bir PNG görüntüsü ile kullanmanın bir yolu var mı?

Yardımlarınız için şimdiden teşekkür ederiz!

Andrei

Answer 1

yerine <md-icon> </md-icon> kullanmak yerine,

<md-button ...> 
    <img class="png-icon" src="path/to/your/file.png" style="width: 24px; height: 24px;"> 
</md-button> 

sizin png resim eklemek için kullanın.

CSS: Ben <md-icon> içeride bile .svg simgeler IE hiç render elde değildi ettiğini tespit ettiği

.png-icon{ 
    margin: 5px auto auto; 
    padding: 0; 
    display: inline-block; 
    background-repeat: no-repeat no-repeat; 
    pointer-events: none; 
} 

ben hem png ve svg simgeleri için web sitemdeki bu yöntemi kullandık.

Answer 2

Benim logomuz bir daire şeklinde olduğundan, <md-button class="md-icon-button"></md-button>'u kullandığımda bu benim için mükemmel çalıştı.

.logo-image { 
    height: 100%; 
    width: 100%; 
} 

: Sonra resim ile dolu boşluğun emin oldum

.md-button.logo { 
    height: 7rem; 
    width: 7rem; 
} 

:

<md-button class="md-icon-button logo"> 
    <img class="logo-image" src="path/to/your/file.png"> 
</md-button> 

bu css ile özel düğme boyutunu oluşturdu