feat(extensible-area): add icon to actions bar separator

Adds an optional parameter 'icon' to the actions bar separator
component, which allows for setting the separator to be an icon instead
of a vertical bar.

src/extensible-areas/actions-bar-item/component.ts

@@ -64,18 +64,24 @@ export class ActionsBarButton extends ActionsBarItem {
 }
 
 export class ActionsBarSeparator extends ActionsBarItem {
+  icon: string;
+
   /**
    * Returns object to be used in the setter for action bar. In this case,
    * a separator.
    *
    * @param position - position that this button will be displayed, see {@link ActionsBarPosition}
+   * @param icon - Icon to be displayed as the separator. If not provided, the default separator
+  * (a vertical bar) will be displayed.
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
     position = ActionsBarPosition.RIGHT,
+    icon = '',
   }: ActionsBarSeparatorProps) {
     super({ type: ActionsBarItemType.SEPARATOR, position });
+    this.icon = icon;
   }
 }
 

src/extensible-areas/actions-bar-item/types.ts

@@ -25,6 +25,7 @@ export interface ActionsBarButtonProps {
 
 export interface ActionsBarSeparatorProps {
   position: ActionsBarPosition;
+  icon?: string;
 }
 
 export interface SelectOption {