> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Menggunakan Ikon dari Material Design

Mari kita lanjutkan dengan menambahkan ikon pencarian. Sebenarnya bisa saja Anda membuat ikon sendiri. Namun, itu akan membutuhkan waktu, belum lagi gaya pada satu ikon dengan ikon lainnya bisa saja berbeda. Oleh karena itu, pada awal latihan ini kita memanfaatkan ikon dari Material Design. Ada dua cara untuk melakukannya, cara pertama yaitu langsung mengunduh ikon dari [https://fonts.google.com/icons](https://fonts.google.com/icons). Cara kedua yaitu memanfaatkan Plugin Material Design yang ada di Figma. Nah, untuk latihan ini kita akan menggunakan cara kedua.

1. Langkahnya yaitu klik **logo Figma** → **Plugins** → **Browse plugins in Community**.\
   [![dos:78e85ead1ba9fee3915c436ead74e0c420211005171843.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:78e85ead1ba9fee3915c436ead74e0c420211005171843.jpeg)](# "dos:78e85ead1ba9fee3915c436ead74e0c420211005171843.jpeg")\
   Cara cepat lainnya yang bisa Anda lakukan adalah menggunakan shortcut **Ctrl+/** untuk Quick Action. Kemudian, cari menggunakan kata kunci **Plugin** dan pilih **Browse plugin in Community** seperti ini:[![dos:c88344ddea46c9316ed65bc1b8d5325120211005171842.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:c88344ddea46c9316ed65bc1b8d5325120211005171842.jpeg)](# "dos:c88344ddea46c9316ed65bc1b8d5325120211005171842.jpeg")\
   Fitur Quick Action ini ke depannya sangat berguna karena Anda bisa mencari berbagai macam aksi melalui fitur ini.
2. Selanjutnya cari Plugin dengan nama **Material Design Icons** dan klik **Install**.[![dos:2a22c0687b026d1b905f1cc45bdcd19420211230145538.png](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:2a22c0687b026d1b905f1cc45bdcd19420211230145538.png)](# "dos:2a22c0687b026d1b905f1cc45bdcd19420211230145538.png")
3. Setelah plugin berhasil terinstal, kembali ke halaman project dan klik kanan pada luar kanvas dan pilih **Plugins** → **Material Design Icons**.\
   [![dos:5e9b525efb0b97c90517ee5085bf0bc320211005171842.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:5e9b525efb0b97c90517ee5085bf0bc320211005171842.jpeg)](# "dos:5e9b525efb0b97c90517ee5085bf0bc320211005171842.jpeg")
4. Setelah tampil pop up, cari icon **“search”** dan **drag and drop** ke dalam kanvas seperti ini:\
   [![dos:a20f0689a382255cd61b5b6b15cda98c20211006092807.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:a20f0689a382255cd61b5b6b15cda98c20211006092807.gif)](# "dos:a20f0689a382255cd61b5b6b15cda98c20211006092807.gif")
5. Selanjutnya tambahkan teks menggunakan **Text Tool (T)** dengan tulisan **“Cari kopi pilihanmu!”**. Lalu, ubah ikon dan teks tersebut menjadi warna abu-abu **(BBBBBB)** seperti berikut:\
   [![dos:34d9a1a3ca546bd94d796682ae733e0520211005172303.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:34d9a1a3ca546bd94d796682ae733e0520211005172303.jpeg)](# "dos:34d9a1a3ca546bd94d796682ae733e0520211005172303.jpeg")