React'ta Material-UI Icon Kullanımı

Adı : React'ta Material-UI Icon Kullanımı

React ile birlikte, web uygulamaları için görsel olarak zenginleştirilmiş kullanıcı arayüzleri oluşturmak daha kolay hale geldi. Material-UI, React uygulamaları için kullanımı kolay ve güzel bir UI tasarım kütüphanesi sunar. Material-UI Icons, Material Design ikonlarını kullanma olanağı sunan Material-UI'nin bir paketidir.

Bu yazıda, Material-UI Icons kullanımı hakkında detaylı bir rehber sunacağız.

Material-UI Icons Nasıl Kurulur?
Material-UI Icons kullanmak için, Material-UI paketinin yanı sıra Material-UI Icons paketinin de yüklenmiş olması gerekir. İki paketi de npm aracılığıyla yükleyebiliriz:

```
npm install @material-ui/core
npm install @material-ui/icons
```

Paketleri yükledikten sonra, ikonları uygulamamıza eklemeye başlayabiliriz.

Material-UI Ikonları Nasıl Kullanılır?
Material-UI Icons, kullanımı oldukça basit olan birçok ikon sağlar. Bu ikonlar bir dize olarak kullanılabilirler. İkonlar, `@material-ui/icons` paketi altındaki çeşitli dosyalarda yer alır.

Örneğin, Material-UI paketinde `AddBox` işlevi `@material-ui/icons/AddBox` içinde yer almaktadır. Uygulamamıza eklemek için, öncelikle ikonu `import` ederiz:

```
import AddBoxIcon from '@material-ui/icons/AddBox';
```

Sonrası istediğimiz yere ekleyebiliriz:

```

```

Birkaç örnek daha:

```
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import PersonIcon from '@material-ui/icons/Person';

...




```

Bunların hepsi dosya adı olarak kullanılabilir.

Ikonların Boyutunu ve Rengini Nasıl Ayarlarız?
Material-UI Icons, boyut, renk ve stili ayarlama seçenekleri sunar.

Boyutlar şöyle ayarlanabilir:

```



```

Rengi şekildeki gibi belirleyebiliriz:

```




// direkt color belirtmek
```

Kelime olarak renk vermek yerine, renk kodunu kullanabiliriz.
Bunların yanı sıra, stili ayarlama seçenekleri de bulunur. Örneğin:

```
import { withStyles } from '@material-ui/core/styles';

const CustomAddBoxIcon = withStyles({
root: {
color: 'blue',
fontSize: 40,