머티리얼 아이콘

    함께 제공되는 머티리얼 아이콘은 Indigo.Design 시스템 다음에서 가져온 160개 이상의 아이콘이 포함되어 있습니다. 물질적 자원 그리고 360개 이상의 아이콘이 제작되었습니다. Indigo.Design 시스템 팀에 따르면 머티리얼 시스템 아이콘 지침. 아이콘은 예를 들어 레이블에 일반적으로 사용되는 텍스트의 양을 줄이기 위해 아이콘 버튼, 목록 항목, 카드 등의 일반적인 작업을 상징하는 데 사용됩니다. 모든 아이콘은 다음에서도 지원됩니다. Ignite UI for Angular.

    • ​Figma 에서는 Icons 이라고 표시된 전용 페이지에서 모든 아이콘에 액세스할 수 있습니다. 아이콘의 모양은 미리 정의된 Color styles 사용하여 사용자 정의할 수 있으므로 디자인 요구 사항에 맞게 색상을 조정할 수 있습니다.
    • ​Sketch에서 이러한 그래픽은 🎨 Material Icons 라는 별도의 페이지에 있으며 색상은 Layer styles 통해 정의되므로 제작 중인 디자인에서 아이콘 모양을 사용자 정의할 수 있습니다.
    • ​Adobe XD 에서는 라이브러리 파일의 왼쪽 열 하단에 있는 동일한 이름의 아트보드에 배치되며 왼쪽에 있는 라이브러리 패널의 Colors 사용하여 사용자 정의할 수 있습니다.
    Note

    ExtraLarge, Large, Medium 및 Small의 네 가지 크기를 갖는 전용 아이콘 구성 요소도 있습니다. 기사, 사용자 정의 카드 및 목록 항목 등에 대한 복잡한 레이아웃을 만들 때 아트보드에 직접 삽입하는 대신 Icons 및 🎨 Material Icons에서 사용할 수 있는 글리프 중 하나를 할당하는 데 사용하세요.

    Available Material Icons

    ​Indigo.Design 시스템 에는 이미 사용 가능한 160개 이상의 머티리얼 아이콘 세트가 있으며, 머티리얼 디자인 분류에 따라 다음과 같은 방식으로 그룹화됩니다.

    • 행동
    • 알리다
    • AV
    • 의사소통
    • 콘텐츠
    • 장치
    • 편집자
    • 파일
    • 하드웨어
    • 이미지
    • 지도
    • 항해
    • 공고
    • 장소
    • 사회의
    • 비녀장
    • WB

    또한 우리 팀이 다음 카테고리에 대한 원본 머티리얼 세트의 확장으로 제작한 360개 이상의 추가 머티리얼 아이콘 세트도 있습니다.

    • 건설
    • 콘텐츠
    • 편집자
    • 선거
    • 재원
    • 건강
    • 로고
    • 프로그램 작성
    • 소셜 미디어

    이러한 아이콘은 GitHub 에서도 프로젝트에 사용할 수 있습니다.

    Adding Icons

    사전 설정된 아이콘 컬렉션을 사용하면 아름다운 앱을 디자인하고 구성 요소 및 패턴에 적합한 상징적 표현을 선택할 수 있습니다. 추가 아이콘 세트를 추가하는 것도 가능하지만 추가 머티리얼 아이콘으로 현재 세트를 확장하는 것도 가능합니다. Ignite UI for Angular 모든 머티리얼 아이콘을 지원하므로 이것이 바로 여러분이 찾고 있는 것일 수 있습니다. 브라우저에서 Material Design Icons Tool로 이동합니다. copyright 등 필요한 아이콘을 검색하고 SVG로 다운로드한 후 해당 아이콘이 속하는 카테고리를 기록해 두세요. 이 경우에는 Action 입니다.

    In Figma

    1. Figma에서 라이브러리를 열고 Icons 페이지로 이동하여 왼쪽 사이드바의 레이어 패널에 프레임으로 동일한 카테고리가 있는지 확인하세요. 그렇지 않은 경우 새로 만들고 아래 단계를 따르세요. 만약 그렇다면(Action 카테고리의 copyright 아이콘의 경우) 해당 카테고리에서 가장 오른쪽에 있는 아이콘을 찾으면 다음과 같은 모습을 볼 수 있습니다. 아이콘은 모든 카테고리에서 알파벳순으로 정렬되어 있습니다.

    2. 이제 가장 오른쪽에 있는 아이콘의 구성요소를 복제하고 오른쪽으로 조금 이동합니다. 이름은 복제된 이름과 동일해야 하며 레이어 구조는 다음과 같아야 합니다.

      층 사용
      아이콘 이름 아이콘 이름을 구성 요소로 정의합니다.
      색상 아이콘의 그래픽 시각화인 구성 요소 내의 중첩된 아이콘 모양
      텍스트 레이어 아이콘 이름을 프레임에 추가 텍스트 레이어로 표시합니다.

    3. 다음으로 기존 아이콘 모양을 다운로드한 SVG로 대체할 것이므로 아이콘 이름 레이어를 선택하고 작업 공간에 copyright 아이콘이 있는 SVG를 드래그 앤 드롭해야 합니다. 이렇게 하면 아이콘 구성 요소 위에 SVG가 배치되어 더 쉽게 찾을 수 있습니다. SVG를 삭제한 후 레이어 패널에 copyright_black_24dp 라는 새 프레임이 생성됩니다. 이 프레임을 확장하고 다른 그룹 바로 외부에 원하는 아이콘 모양을 드래그해야 하지만 여전히 현재 프레임에 있습니다. 그런 다음 다른 추가 그룹을 제거하고 프레임에 아이콘 모양만 남겨 둡니다.

    4. 그런 다음 Vector 모양이 포함된 copyright_black_24dp 프레임을 선택하고 프레임에서 구성 요소를 만들어야 합니다. 이를 수행하는 두 가지 빠른 옵션이 있습니다. 프레임을 마우스 오른쪽 버튼으로 클릭하고 Create component 옵션을 선택하거나 작업 공간 중앙에 위치한 Figma 도구 모음에서 Create component 아이콘을 클릭하는 것입니다. 다음으로 벡터 모양 이름을 Color로 변경하고 오른쪽 사이드바의 Selection colors에서 색상을 grays.700으로 설정합니다.

    5. 그에 따라 아이콘 구성 요소 이름을 업데이트한 후 중복된 구성 요소의 구성 요소와 교체해야 합니다.

    6. 마지막으로 변경 사항을 라이브러리 업데이트로 게시해야 합니다. 구독한 파일에서 이러한 변경 사항을 보려면 변경 사항을 검토하고 수락해야 합니다.

    In Sketch

    1. Sketch에서 라이브러리를 열고 🎨 Material Icons 페이지로 이동하여 동일한 카테고리가 왼쪽에 텍스트 레이어로 존재하는지 확인하세요. 그렇지 않은 경우 새로 만들고 아래 단계를 따르세요. 만약 그렇다면(Action 카테고리의 copyright 아이콘에 대한 경우) 해당 카테고리에서 가장 오른쪽에 있는 아이콘을 찾으면 다음과 같은 모습을 볼 수 있습니다.

    2. 이제 가장 오른쪽에 있는 아이콘의 기호를 복제하고 오른쪽으로 조금 이동합니다. 이름은...Copy로 끝나야 하며 레이어 구조는 다음과 같아야 합니다.

      층 사용
      색상 아이콘 모양과 색상을 정의합니다.
      모양 항상 아이콘 경계 상자를 정의하는 직사각형

    3. 다음으로 기존 아이콘 모양을 다운로드한 SVG로 대체할 것이므로 Color 레이어를 선택하고 그 위에 copyright 아이콘이 있는 SVG를 드래그 앤 드롭해야 합니다. 이렇게 하면 레이어 패널에 copyright-24px 새 그룹이 생성됩니다. 이 그룹을 확장하고 이 그룹 외부, 직사각형 모양 레이어 위에 원하는 아이콘 모양을 드래그해야 합니다.

    4. 이제 이전 아이콘 문자 모양을 제거하고 새 아이콘 모양을 이동한 후 남은 그룹을 제거해 보겠습니다. 그런 다음 copyright 기호가 있는 유일한 아이콘 모양을 선택하고 이름을 Color로 변경하고 모양을 grays.700 Fill-only 스타일로 설정해야 합니다.

    5. 이에 따라 심볼 이름을 업데이트한 후에는 다른 아이콘과 마찬가지로 이 아이콘을 사용하도록 설정되었습니다.

    In Adobe XD

    1. Adobe XD에서 라이브러리를 열고 🎨 Material Icons 아트보드로 이동하여 동일한 카테고리가 왼쪽에 텍스트 레이어로 존재하는지 확인하세요. 그렇지 않은 경우 새로 만들고 아래 단계를 따르세요. 만약 그렇다면(Action 카테고리의 copyright 아이콘의 경우) 해당 카테고리에서 가장 오른쪽에 있는 아이콘을 찾으면 다음과 같은 모습을 볼 수 있습니다.

    2. 이제 가장 오른쪽에 있는 아이콘의 기호를 복제하고 오른쪽으로 조금 이동합니다. 그러면 인스턴스를 선택할 때 왼쪽 상단 모서리에 녹색 윤곽선이 있는 흰색 다이아몬드 모양으로 표시된 기호의 인스턴스가 생성됩니다.

    3. 이 인스턴스의 그룹을 해제하고 두 개의 새 레이어에서 새 그룹을 만들고 이름을 "_Overrides/Material Icons/action/copyright"로 지정합니다.

      층 사용
      그룹 ~ 아이콘 모양과 색상을 정의합니다.
      모양 아이콘 경계 상자를 정의하는 항상 사각형

    4. 다음으로 기존 아이콘 모양을 다운로드한 SVG로 바꾸고 싶으므로 이전 문자 모양이 있는 그룹을 선택하고 그 위에 copyright 아이콘이 있는 SVG를 끌어서 놓아 두 아이콘을 모든 면에서 정렬해야 합니다. 이렇게 하면 레이어 패널에 copyright-24px 새 그룹이 생성됩니다. 이 그룹을 확장하고 이 그룹 외부, 직사각형 모양 레이어 위에 원하는 아이콘 모양을 드래그해야 합니다.

    5. 이제 이전 아이콘 문자 모양을 제거하고 새 아이콘 모양을 이동한 후 남은 그룹을 제거해 보겠습니다. 그런 다음 copyright 기호가 있는 유일한 아이콘 모양을 선택하고 라이브러리 패널의 색상에서 모양을 grays.700으로 설정해야 합니다.

    6. 마지막 단계는 디자인의 다른 아이콘 요소처럼 사용할 수 있도록 _Overrides/Material Icons/action/copyright 그룹에서 구성 요소를 만드는 것입니다.

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.