Skip to content

[BottomNavigation][Tabs][iOS] TabStripItem font icon doesn't apply own classes #7547

@MartoYankov

Description

@MartoYankov

Environment

  • CLI: 6.0.1
  • Cross-platform modules: 6.0.1
  • Android Runtime: 6.0.0
  • iOS Runtime: 6.0.1

Describe the bug
On iOS TabStripItem font icon doesn't get the element's classes.

To Reproduce
Use the following setup (also visible in e2e/ui-tests-app -> tabs -> font icons example):

  <Tabs>
    <TabStrip>
        <TabStripItem title="First" iconSource="font://&#xF10B;" class="font-awesome font-size color"></TabStripItem>
    </TabStrip>
  ...
  </Tabs>
.font-awesome {
  font-family: "FontAwesome";
}

.font-size {
  font-size: 36;
}

.color {
  color: blue;
} 

With this setup, the font icon isn't shown on iOS.

Expected behavior
The font icon should be shown properly.

Additional Context
This alternative works because of inheritance:

  <Tabs class="font-awesome">
    <TabStrip>
        <TabStripItem title="First" iconSource="font://&#xF10B;" class="font-awesome font-size color"></TabStripItem>
    </TabStrip>
  ...
  </Tabs>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions