The v-icon component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official Material Design Icons page. To use any of these icons simply use the mdi- prefix followed by the icon name.

Icons come in two themes (light and dark), and five different sizes (x-small, small, medium (default), large, and x-large).


제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

Material Design is also supported. For more information on how to install it please navigate here

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project. For more information on how to install it, please navigate to the installation page

색상 헬퍼들을 이용하여 아이콘의 색을 기본적인 다크나 라이트 테마 이상으로 바꿀 수 있습니다.

아이콘은 액션을 강조하기 위해 버튼 안에서도 사용될 수 있습니다.

Binding any click event to v-icon will automatically change the cursor to a pointer.

You can manually import only the icons you use when using the @mdi/js package. If you want to use SVG icons with VIcon component, read about using them here.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!