[Compose] Material ImageVector로 Icon 사용하기

개인 프로젝트에 Compose를 활용하여 개발하던 중에 Material ImageVector를 활용해서

아이콘을 넣고 있었는데 어떤 아이콘들을 제공 해주는지 궁금해서 찾아보았고,

다른 분들도 쉽게 찾으면 좋겠어서 포스팅합니다.

 

Material Icons

---

손쉽게 Material Design에서 제공해주는 Icon들로 상황에 맞게

Outlined, Filled, Rounded, Sharp, TwoTone 으로 사용할 수 있다.

 

제공해주는 아이콘 종류들은 아래 링크에서 확인할 수 있다.

https://fonts.google.com/icons?selected=Material+Icons

Google Fonts

 

 

기본 사용법

---

우선 Icon Compose UI를 사용하기 위해서는 먼저 다음과 같은 의존성 추가가 필요하다.

implementation "androidx.compose.material:material:$compose_version"

 

이후 다음과 같이 선언하여 사용한다.

@Composable
fun ArrowBackIcon() {
    val arrowImage = Icons.Default.ArrowBack

    Icon(
        imageVector = arrowImage,
        contentDescription = null
    )
}

 

추가 아이콘

---

하지만 코드에서 Icons.Default 로 접근해보면 ArrowBackIos와 같은 사이트에서 제공해주는

아이콘이 없는 것을 볼 수 있다.

 

제공해주는 Icon을 더 많이 사용하고 싶다면 다음 의존성을 추가하면 된다.

implementation "androidx.compose.material:material-icons-extended:$compose_version"

그럼에도 없는게 꽤 있긴 하다.