This chapter explains the usage of Google's (Material) Communication icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<style>
i.custom {font-size: 2em; color: green;}
</style>
</head>
<body>
<i class = "material-icons custom">accessibility</i>
</body>
</html>
The following table contains the usage and results of Google's
(Material) Communication icons. Replace the < body > tag of the
above program with the code given in the table to get the respective
outputs −
| Usage |
Result |
| <i class="material-icons custom">business</i> |
business |
| <i class="material-icons custom">call</i> |
call |
| <i class="material-icons custom">call_made</i> |
call_made |
| <i class="material-icons custom">call_merge</i> |
call_merge |
| <i class="material-icons custom">call_missed</i> |
call_missed |
| <i class="material-icons custom">call_received</i> |
call_received |
| <i class="material-icons custom">call_split</i> |
call_split |
| <i class="material-icons custom">chat</i> |
chat |
| <i class="material-icons custom">chat_bubble</i> |
chat_bubble |
| <i class="material-icons custom">chat_bubble_outline</i> |
chat_bubble_outline |
| <i class="material-icons custom">clear_all</i> |
clear_all |
| <i class="material-icons custom">comment</i> |
comment |
| <i class="material-icons custom">contact_phone</i> |
contact_phone |
| <i class="material-icons custom">contacts</i> |
contacts |
| <i class="material-icons custom">dialer_sip</i> |
dialer_sip |
| <i class="material-icons custom">dialpad</i> |
dialpad |
| <i class="material-icons custom">forum</i> |
forum |
| <i class="material-icons custom">import_export</i> |
import_export |
| <i class="material-icons custom">invert_colors_off</i> |
invert_colors_off |
| <i class="material-icons custom">live_help</i> |
live_help |
| <i class="material-icons custom">location_off</i> |
location_off |
| <i class="material-icons custom">location_on</i> |
location_on |
| <i class="material-icons custom">message</i> |
message |
| <i class="material-icons custom">no_sim</i> |
no_sim |
| <i class="material-icons custom">phone</i> |
phone |
| <i class="material-icons custom">phonelink_erase</i> |
phonelink_erase |
| <i class="material-icons custom">phonelink_lock</i> |
phonelink_lock |
| <i class="material-icons custom">phonelink_ring</i> |
phonelink_ring |
| <i class="material-icons custom">phonelink_setup</i> |
phonelink_setup |
| <i class="material-icons custom">portable_wifi_off</i> |
portable_wifi_off |
| <i class="material-icons custom">present_to_all</i> |
present_to_all |
| <i class="material-icons custom">ring_volume</i> |
ring_volume |
| <i class="material-icons custom">speaker_phone</i> |
speaker_phone |
| <i class="material-icons custom">stay_current_landscape</i> |
stay_current_landscape |
| <i class="material-icons custom">stay_current_portrait</i> |
stay_current_portrait |
| <i class="material-icons custom">stay_primary_landscape</i> |
stay_primary_landscape |
| <i class="material-icons custom">stay_primary_portrait</i> |
stay_primary_portrait |
| <i class="material-icons custom">swap_calls</i> |
swap_calls |
| <i class="material-icons custom">textsms</i> |
textsms |
| <i class="material-icons custom">voicemail</i> |
voicemail |
| <i class="material-icons custom">vpn_key</i> |
vpn_key |
| <i class="material-icons custom">email</i> |
email |
| <i class="material-icons custom">call_end</i> |
call_end |
No comments:
Post a Comment