Icona materiale angolareJS con file PNG

Question

Attualmente sto lavorando con AngularJS per un po ', ma ho appena iniziato a esaminare il progetto Material dal team di Angular. Negli ultimi 2 giorni sto cercando di ottenere la direttiva Icon (https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon) per lavorare con almeno i file PNG, ma non riesco a farlo funzionare ... Sì, ho letto la documentazione e non c'è menzione dei PNG e la direttiva sembra funzionare solo con icone SVG e CSS, ma spero ancora che ci sia un trucco disponibile. Quindi: esiste un modo per utilizzare la direttiva AngularJS Material Icon con qualsiasi immagine PNG?

Grazie in anticipo per qualsiasi aiuto!

Andrei

Answer 1

Invece di usare <md-icon> </md-icon>, utilizzare

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

per includere l'immagine png.

CSS:

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

Ho usato questo metodo sul mio sito web per entrambe le icone PNG e SVG perché ho trovato che anche le icone .svg all'interno <md-icon> non applicava il rendering a tutti in IE.

Answer 2

Il mio logo ha la forma di un cerchio, quindi questo ha funzionato perfettamente per me quando ho utilizzato lo <md-button class="md-icon-button"></md-button>.

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

ho creato le dimensioni del pulsante personalizzato con questo css:

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

Poi si è assicurato la mia immagine riempito lo spazio con:

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