material icon ( 간단 이미지 )

KHW·2021년 10월 5일

다양한사이트

다양한 사이트

목록 보기

6/9

1. material icon

재료 아이콘은 5가지 스타일과 다운로드 가능한 다양한 크기 및 밀도로 제공됩니다. 아이콘은 핵심 머티리얼 디자인 원칙 및 메트릭을 기반으로 합니다.

간단하게 5종류의 다양한 아이콘들을 사용할 수 있다.

사용하는 방법

CDN 다운 : 해당 링크의 link ref를 복붙한다.

원하는 이미지 찾기 : 원하는 이미지를 찾고 클릭한다.

이미지 관련 태그 복사 : 원하는 태그에 따르는 코드를 복사하여 추가한다.

해당 코드와 결과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
</head>
<body>
<span class="material-icons">
play_arrow
</span>

<span class="material-icons">
file_download
</span>

<span class="material-icons">
expand_more
</span>

<span class="material-icons">
arrow_back_ios
</span>

<span class="material-icons">
open_in_new
</span>

</body>
</html>

다양한 결과를 확인 할 수 있다.

5종류중 한종류만 된다??

해당 코드를 Filled가 아닌 다른 종류에 시도하면 정상적으로 되지않는다.

해결방법

link ref의 추가적인 코드가 필요하다.

해결 코드와 결과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
          rel="stylesheet">
</head>
<body>
<span class="material-icons-outlined">
play_arrow
</span>

<span class="material-icons-outlined">
play_arrow
</span>

<span class="material-icons-round">
play_arrow
</span>

<span class="material-icons-sharp">
play_arrow
</span>

<span class="material-icons-two-tone">
play_arrow
</span>

</body>
</html>

family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp를 수정하여 5 종류의 다른 것도 실행 될 수 있게 link ref를 수정한다.