How about ons.platform.isIPhoneX?

https://onsen.io/v2/api/vue/$ons.platform.html#method-isIPhoneX

Contrary to the naming, this will return true for iPhone X, XS, XS Max, XR, 11, 11 Pro, 11 Pro Max, 12 Mini, 12, 12 Pro or 12 Pro Max.

Internally, each ons-tab has a radio input which is checked when the tab is active.

It’s a bit hacky, but you should just need to check the input and uncheck the currently active input for the active styling to work.

e.g. if fa-search is currently selected and you want to change tab to fa-user-md:

document.querySelector('ons-tab[icon="fa-search"] input').checked = false;
document.querySelector('ons-tab[icon="fa-user-md"] input').checked = true;

If you have a paid plan on Monaca, I would suggest contacting Monaca Support Team. They will be able to debug your project to locate the error. At the moment, it’s hard to know what’s going on without seeing your project.

The Material icons are Material Design Iconic Font v2.2.0.

The full list is here:
http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html

So that means that the icons don’t completely match up with the ones you linked, but hopefully you can find suitable ones there.

Come to think of it, I’m not sure why we don’t use the official ones. I will look into it…

Thanks for the report.

At the moment, only debug and release options seem to be supported, but if you use --browser you can select the Debugger build in the GUI.

That’s probably more bother than it’s worth to try and fix. I would suggest just adding your items in reverse order e.g.

<ons-carousel>
  <ons-carousel-item>third</ons-carousel-item>
  <ons-carousel-item>second</ons-carousel-item>
  <ons-carousel-item>first</ons-carousel-item>
</ons-carousel>

The carousel already swipes left and right if you have swipeable set.

All you need to is set the initial starting item to the last one by setting the initial-index to the number of items you have minus 1. So if you have 3 items in your carousel set it to 2:

<ons-carousel initial-index="2" swipeable></ons-carousel>

In that case you need to set a CSS color rule on the tab’s button (it has the class tabbar__button).

For example, you could create a class custom-color for the ons-tab and a CSS rule like:

<ons-tab class="custom-color"></ons-tab>

.custom-color .tabbar__button {
  color: green;
}

The link just leads to an empty editor. Can you try again please?

Can you post a minimal sample that shows the problem using the Playground?:
https://onsen.io/playground/