Biểu tượng Material AngularJS với tệp PNG

Question

Tôi đang làm việc với AngularJS một chút, nhưng tôi vừa mới bắt đầu xem dự án Material từ nhóm Angular. Trong 2 ngày qua, tôi đang cố gắng lấy chỉ thị Biểu tượng (https://material.angularjs.org/#/api/material.components.icon/directive/mdIcon) để làm việc với ít nhất tệp PNG, nhưng tôi không thể làm việc đó ... Có, tôi đã đọc tài liệu và không đề cập đến của PNG và chỉ thị dường như chỉ hoạt động với các biểu tượng SVG và CSS, nhưng tôi vẫn hy vọng rằng có sẵn một mẹo. Vì vậy: có cách nào để sử dụng chỉ dẫn Biểu tượng Vật liệu AngularJS với bất kỳ hình ảnh PNG nào không?

Cảm ơn bạn đã giúp đỡ!

Andrei

Answer 1

Thay vì sử dụng <md-icon> </md-icon>, sử dụng

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

bao gồm hình ảnh png của bạn.

CSS:

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

Tôi đã sử dụng phương pháp này trên trang web của tôi cho cả png và svg biểu tượng vì tôi thấy rằng ngay cả những biểu tượng .svg bên <md-icon> đã không nhận được trả lại ở tất cả trong IE.

Answer 2

Biểu trưng của tôi có dạng hình tròn nên điều này đã làm việc hoàn hảo cho tôi khi tôi sử dụng <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> 

Tôi tạo ra kích thước nút tùy chỉnh với css này:

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

Sau đó, chắc chắn hình ảnh của tôi tràn ngập không gian với:

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