Rotate/Flip Material Icon

WEB TMS WEB Core
1

Hi,

I have been able to do thiis but is there any way of doing this differently?

image

.icon-flipped {
    -o-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}
.icon-rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.icon-rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

Thanks,

Ken

2

At this moment there is no such rotation code directly in the TMS WEB Core framework, so indeed, you need to resort to CSS.

3

You're talking about arrows in different directions? Can you use icons already oriented that way? 'Arrow Left', 'Arrow Right', 'Arrow Drop Up', 'Arrow Drop Down' ? Maybe a font size or two larger, so that they more closely match the diameter of the circle?

Another way to do it differently is to use Font Awesome instead, which also has several variations of arrows in different directions but you can also add rotation like this...

<i class="fa-solid fa-caret-right fa-rotate-270"></i>

...and other classes that can help with alignment and sizing.

4

I would love to be able yo use just different arrows but unfortunately there is not a set that look the same other than the simple arrow_downward, arrow_back, etc. The other arrows are a combination of outline or filled and don't look the same when used together. If I could access material-icons-outlined I could manage it but I am not aware of any way of doing so.

I use material icons extensively so would not want to switch to font awesome at this stage. It is very handy how TMS have integrated them wth TWebBitBtn, etc.

1 Like
5

in TMS WEB Core 2.0 there will be support for selecting the material icon style.

1 Like
6

Fantastic!