Rich Widgetsに含まれているIcon Widgetに色をつけたり、複数重ねたりする方法です。
動作確認環境
Platform Version：11.0.108.0
Service Studio Version：11.0.414.0
RichWidgets：11.0.108.0
Icon Widgetとは
System Componentsの1つである、RichWidgets eSpaceに含まれるWidgetです。
文字通り、アイコンをScreen上に表示する部品になります。
fontawesomeのアイコンを組み込んで、Service Studio上で配置できるようになっています。
実装パターン：Icon Widget に色をつける
Icon WidgetプロパティにはNameとSizeパラメータはありますが、色の指定はありません。
色をつけたいときは、Containerで囲んでContainerに色をつけることで対応できます。
上記の例では、Icon Widgetを囲んだContainerにテキストを青に設定するためのclass 「text-blue」を設定しています。
実行すると下のようになります。
この例では、Borders>Linesで境界線の色も青にしてあります。
fontawesomeのページによると
Font Awesome icons automatically inherit CSS size and color
ということなので、Containerに設定した色を引き継いでくれているようです。
実装パターン：Icon Widgetを組み合わせて新しいアイコンを作る
複数のIcon Widgetを組み合わせて(重ねて)表示させることができます。
OutSystem UIのPatternsにあります。
OutSystemsUIWeb ModuleのUtilities/StackedIconです。
設定の例：
背景に表示する(下に敷く)アイコンをIconBackで通常のIconのNameプロパティと同じように選択します。この場合はかれんだーのアイコンを選択しています。
上に重ねるアイコンはIconFrontです。このアイコンはそのままだと下のアイコンの真ん中に表示されます。
カレンダーのように真ん中あたりが空白でないアイコンに重ねる場合、stacked-icon-frontがついているタグにmargin-top: 10px;のようなスタイルを適用することできれいに表示できます。
