[angular material] 앵귤러 icon 종류 및 사용

아이콘은 일반적인 이미지 형태로 제공 되어 문장의 성격을 암시하기도 Button에 삽입되기도 합니다.

 

이미 많은 카테고리 별로 아이콘이 구분되어 제공 되고 있고 google 이외에도 자체 제작한 아이콘을 제공하고 있는 업체들도 많이 있어 선택의 폭이 넓습니다.

 

1. 아이콘 사용법

 

1.1 일반적인 사용법

<mat-icon></mat-icon> 태그를 이용하면 어디서나 사용 가능 합니다.

그리고 태그 사이에 아이콘 명칭을 기입합니다.

 

<mat-icon>android</mat-icon>

이렇게 하면 화면에서 안드로이드 아이콘이 나오는 것을 확인 할 수 있습니다.

 

1.2 사이즈 조절

angular material icon은 font 사이트 조절과 같은 방식으로 해주면 적용 됩니다.

css를 설정하고

.material-icons.md-18 { font-size: 18px; }

.material-icons.md-48 { font-size: 48px; }

 

<mat-icon class="material-icons md-18">android</mat-icon>

<mat-icon class="material-icons md-48">android</mat-icon>

 

적용을 하면 됩니다.

 

 

1.3 색상 조절

size를 일반 폰트처럼 한다고 했으니 색상도 동일 하겠죠?

좀 큰 폰트에 오랜지 색과 파란색을 정의 합니다.

.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }

.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }

 

그리고 적용을 합니다.

 

<mat-icon class="material-icons md-48 orange">android</mat-icon> &nbsp;&nbsp;

<mat-icon class="material-icons md-48 blue">android</mat-icon>

 

&nbsp;&nbsp; 이걸 안하면 넘 붙어있어서 자체 검열…

나 사진 찍을 때랑 똑 같은 차렸자세.

 

1.4 투명도 조절

아이콘은 투명도 조절도 가능 합니다.

투명도 적용을 하려면 css에서 alpha 값을 0.0 에서 1.0 까지의 값을 적용 합니다.

0.0을 적용하면 화면에 보이지 않기 때문에 0.1로 했습니다.

.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }

.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1); }

 

적용을 해서 확인해 봅니다.

<mat-icon class="material-icons md-48 blue100">android</mat-icon> &nbsp;&nbsp;

<mat-icon class="material-icons md-48 blue10">android</mat-icon>

 

 

 

2. 전체 적용

 

위에서 설명한 내용을 전체 적용해 보았습니다.

 

2.1 css 파일

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }
.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }
.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }
.material-icons.md-48.blue50 { font-size: 48px; color: rgba(0, 0, 255, 0.5); }
.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1);

2.2 html 파일

<table>
    <tr>
        <td width="50" align="right"><mat-icon class="material-icons md-18">android</mat-icon></td>
        <td>.material-icons.md-18 { font-size: 18px; } </td>
    </tr>
    <tr>
        <td width="50" align="right"><mat-icon class="material-icons md-24">android</mat-icon></td>
        <td>.material-icons.md-24 { font-size: 24px; } </td>
    </tr>
    <tr>
        <td width="50" align="center"><mat-icon class="material-icons md-36">android</mat-icon></td>
        <td>.material-icons.md-36 { font-size: 36px; } </td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48">android</mat-icon></td>
        <td>.material-icons.md-48 { font-size: 48px; } </td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 orange">android</mat-icon></td>
        <td>.material-icons.md-48.orange { font-size: 48px; color: #FB8C00; }</td>
    </tr>

    <tr>
        <td><mat-icon class="material-icons md-48 blue">android</mat-icon></td>
        <td>.material-icons.md-48.blue { font-size: 48px; color: #0000FF; }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue100">android</mat-icon></td>
        <td>.material-icons.md-48.blue100 { font-size: 48px; color: rgba(0, 0, 255, 1); }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue50">android</mat-icon></td>
        <td>.material-icons.md-48.blue50 { font-size: 48px; color: rgba(0, 0, 255, 0.5); }</td>
    </tr>
    <tr>
        <td><mat-icon class="material-icons md-48 blue10">android</mat-icon></td>
        <td>.material-icons.md-48.blue10 { font-size: 48px; color: rgba(0, 0, 255, 0.1); }</td>
    </tr>
</table>

2.3 결과

3. 아이콘 종류

현재 재공되고 있는 아이콘의 카테고리 별 종류의 아주 일부분을 가져와 보았습니다.

참조한 사이트는

https://material.io/tools/icons/?style=baseline

입니다.

 

3.1 Action

 

3.2 Alert

3.3 Av

3.4 Communication

3.5 Content

3.6 Device

3.7 Editor

3.8 File

3.9 Hardware

3.10 Image

3.11 Maps

3.12 Navigation

3.13 Notification

3.14 Places

3.15 Social

3.16 Toggle

- copy coding -