Title: Theory / Unimportant / CS / Descriptive / Material / Design / Icon

Name: System icons
Page: https://material.io/design/iconography/system-icons.html#design-principles

Question: Systems icons are designed to be
Answer: simple
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Answer2: modern
Answer3: friendly
Answer4: sometime quirky

Question: What's icons size
Answer: 24x24 dp
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material

Name: live area
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material
Intuition: Contains icon content and some extra optional details that can be hidden

Name: dense live area
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material
Intuition: Contains icon content

Name: padding
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material

Name: dense padding
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material

Name: Trim area
Definition: the complete size of a graphic
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material

Name: Keyline
Definition: with circle, vertical and horizontal rectangle and square
Page: https://material.io/design/iconography/system-icons.html#design-principlesq
Context: Material

Question: Constaints on pixel coordinate?
Answer: They must be integers
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: basic shapes
Definition: circle,
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Definition2: square,
Definition3: rectangle,
Definition4: orthogonals, and
Definition5: diagonals

Name: Geometry
Definition: ?
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Clarity
Definition: The fact that all borders and elements are defined with integral pixel limit
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Name2: Pixel perfection

Name: Cross platform adaptation
Definition: The fact that the design adapt to the OS standard
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Example: on android and on iOS

Name: exterior corner
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: interior corner
Definition: square
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: strokes
Definition: always 2dp width
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Counter stroke
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Stroke terminal
Definition: never rounded
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Optical corrections
Definition: Taking an icon satisfying standard and adjusting details to add legibility
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: What's the touch target value?
Answer: At least 48dp on hand device (for accessibility)
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Answer2: 40dp on dense layouts with mouse/keyboard

Question: Opacity of an active icone in focused state in light mode
Answer: 87%
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: Opacity of an inactive icone in light mode
Answer: 38%
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: Opacity of an active icon not focused in light mode
Answer: 54%
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: Opacity of an active icon not focused in dark mode
Answer: 70%
Page: https://material.io/design/iconography/system-icons.html#design-principles
https://material.io/design/color/dark-theme.html#ui-application
Context: Material

Question: Opacity of an inactive icon in dark mode
Answer: 50%
Page: https://material.io/design/iconography/system-icons.html#design-principles
https://material.io/design/color/dark-theme.html#ui-application
Context: Material

Question: Opacity of an active focused icon in dark mode
Answer: 100%
Page: https://material.io/design/iconography/system-icons.html#design-principles
https://material.io/design/color/dark-theme.html#ui-application
Context: Material

Question: intuition of thinner stroke
Answer: implies lightness, giving unfilled icons a lighter style.
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: intuition of thicker stroke
Answer: a sense of heaviness and mass, making filled icons feel heavier
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: A filled icon
Definition: An icon with filled background, with actual content white.
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Notation: intuition of thicker stroke

Name: An unfilled icon
Definition: An icon with transparent background, with actual content in black.
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Notation: intuition of thicker stroke

Name: Stroke alignment
Definition: Given a filled icon, where are the strokes added when creating an unfilled version
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Inside Stroke alignment
Definition: Given a filled figure, remove it content, leaving a small stroke on the inner border.
E.g. on it returns
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Center Stroke alignment
Definition: Given a filled figure, remove it content, leaving a small stroke whose center is the border of the icon
E.g. on it returns
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Center Stroke alignment
Definition: Given a filled figure, remove it content, adding a small stroke on the outside
E.g. on it returns
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: sharp icons
Definition: display corners with straight edges
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Intuition: a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren’t well-reflected by rounded shapes.

Name: Rounded icons
Definition: Icons with a corner radius
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Intuition: pair well with brands that use heavire typography, curved logos or circular elements

Name: Corner radius
Definition: The radius of a the circle which, if put on the corner, would match the corder border
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Question: Corner radius value
Answer: 0, 2, 3 or 4 dp
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material
Answer2: 1dp for 2dp stroke

Name: Two-tone icons
Definition: An icon where the filling color is not transparent and distinct from the stroke color
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Product icon
Definition: An icon, satisfying material guideline, representing a product
Page: https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes
Context: Material icon

Name: creating icon
Definition: todo
Page: https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes
Context: Material icon

Name: Transition
Definition: Changing an icon to display a change in state
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon
Example: Wifi connectivity
Example2: play/pause button

Name: Emphasis
Definition: How much importance is shown in the icon transition
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon

Question: When to emphases a transition a lot
Answer: When the action is important
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon
Name: Emphasis

Question: When to remove all emphases to a transition
Answer: When the feature is more important than the style
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon
Name: Emphasis

Question: How long should be an icon animation.
Answer: Simple ones: 100 ms
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon
Answer2: average: 200ms
Answer3: Complex : 500 ms
Name: Emphasis

Name: Stagger
Definition: The fact to add icons one after the other
Page: https://material.io/design/iconography/animated-icons.html#transitions
Context: Material icon
Intuition: Add a sens of progression to the interface

Wrong: ￼
Explanation: Prefer graphic and bold to delicate thin stroke weights
Other fields (not shown on cards):
Page: https://material.io/design/iconography/system-icons.html#design-principles

Explanation: first: prefer geometric consistent shapes to gestural or loose organic shapes
Other fields (not shown on cards):
Page: https://material.io/design/iconography/system-icons.html#design-principles

Explanation: First. Make icons faced forward, not dimensional
Other fields (not shown on cards):
Page: https://material.io/design/iconography/system-icons.html#design-principles

Explanation: First. Don't be overly litteral, simplify for greater clarity and legbility, avoid complex
Other fields (not shown on cards):
Page: https://material.io/design/iconography/system-icons.html#design-principles