To return to the previous route ("cancel" the current route), when should I use
Icon.arrow_circle_left in the app header?
Left arrow seems more appropriate in this case, you are not trying to close the whole flow but to return to the previous route, if you provide a little more context about where are you on the process (Eg. In the first step of a modal screen it might be ok to go back with the cross icon)
But overall the most appropriate is to go with the left arrow icon to go back one step, hope this helps.
Your question is a bit general and also unclear. The unclear part is what you mean by "route".
If your route is a process, then you need to be careful with the left arrow since users might confuse it with the previous step. I would use cross here instead.
But if your route all happens in one page and doesn't have multiple steps (for example, Google Map's direction page), then 'closing' it but tapping on the top left arrow makes sense.
Routes form a tree.
Of the two choice you offer use
(Although not available on Material UI.)
Two of the most commonly used tree structure concepts are operating system file browsers and web browsers.
File Browser Navigation Schemes
Linux (left arrow, up arrow):
Mac (left arrow):
Windows (left arrow, up arrow):
Note: each have a left pointing arrow, in first position. Two include an additional up pointing arrow, in last position.
Web Browser Navigation Schemes
Firefox (left arrow):
Chrome (left arrow):
Safari (left arrow):
When using a design system, we should adopt it’s terminology and respect its guidance. That’s one of the design system‘s goals: to establish a common language.
Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.
Within forward navigation, Material design uses the term flow, which might compare to the mentioned route.
Sequentially through a flow, or an ordered sequence of screens, such as a checkout process
I’m assuming app header means the Top app bar.
It only has one Navigation icon, which is optional and on the left
It can take any of the following forms:
- A menu icon, which opens a navigation drawer
- An up arrow, which navigates upward an app’s hierarchy
- A back arrow, which returns to the previous screen
With Material Design 3 the up arrow was removed from the guidelines.
A top app bar does have Action items and an overflow menu on the right. You might argue that the × would be an action (close), personally, I wouldn’t treat it as such.
The only place that the Material Design examples use an ×, is in the Contextual action bar which appears on selection.
Side sheets are supplementary surfaces primarily used on tablet and desktop.
On the smallest viewports, which usually are referred to as mobile, it’s pretty straight forward to define a screen. It’s anything that fills the screen at a given time. So the above explained navigation is easily understandable.
At some breakpoint, a screen might turn into a side sheet.
Hence the concept of a page is not as clear anymore, neither is back navigation.
Users might expect to close a filter screen by using the back button on mobile. But closing a side sheet via the back button seems not intuitive.
The Material Design system does not seem to have any guidance on that issue, so I guess this is the hard question to ask.