Storybook (Vue)에서 Vuetify를 사용할 때 아이콘 ()이 표시되지 않는 문제

현상



아이콘이 표시되고 싶지만, 문자열만이 되어 버린다.



대책



글꼴에 대한 참조가 없기 때문인 경우


.storybook/preview-head.html 에 다음 추가

.storybook/preview-head.html
<link
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
  rel="stylesheet"
/>

IE의 경우



@font-face 에서 알 수없는 오류가 발생하는 것 같습니다.



WebFont에 대응해 죄송하므로 별도 대응이 필요합니다.

IE에서 웹 글꼴 표시하기 | demodemo - 웹 디자인 / 앱 개발 / 프로토 엔드 개발 기술 데모

IE11 not showing font awesome icons · Issue #8825 · FortAwesome/Font-Awesome

결과



안전하게 아이콘이 표시되었습니다.



링크



Icon Component — Vuetify.js

좋은 웹페이지 즐겨찾기