Google Material Symbols VueJS 프로젝트에 적용하기

아이콘 다운로드

여기 에서 폰트를 다운받습니다.

프로젝트에 폰트 추가

my-project/
├── src/
│   ├── assets/
│   │   ├── fonts/
│   │   │   └── MaterialSymbolsRounded_48pt-Regular.ttf
│   │   └── main.css
│   └── App.vue

/* src/assets/main.css */

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('@/assets/fonts/MaterialSymbolsRounded_48pt-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 아이콘 사용을 위한 공통 클래스 정의 */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 기본 크기 */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* 렌더링 최적화 */
  -webkit-font-smoothing: antialiased;
}

아이콘 사용

<template>
  <div class="menu">
    <span class="material-symbols-rounded">search</span>
    <span>검색</span>
  </div>
</template>

작동원리

폰트 파일 내부적으로 ‘search’라는 텍스트를 입력하면 특정 모양(돋보기 아이콘)으로 치환하도록 매핑되어 있기 때문.