mikepenz / android-iconics

Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.

Android-Iconics

... allows to include any icon font with all its vector icons in your project. No limits. Scale with no limit, use any color at any time, provide a contour, and many additional customizations...

---

What's included 🚀 • Setup 🛠️ • Migration Guide 🧬 • WIKI / FAQ 📖 • Custom Font 🖍️ • Sample App

---

What's included 🚀

• No customization limitations (size, color, contour, background, padding, positioning, ...)
• Shadow support
• Use as XML Drawable starting API 24
• One icon source (no more mdpi, hdpi, ...)
• Flexibility
  • Size
  • Colors
  • Contour
  • Shadow
  • Auto mirroring for RTL (opt-in)
• If it takes a Drawable, it will also work with the IconicsDrawable!
• Save in APK size
• Compose support

Already available fonts

• Google Material Design Icons
• Material Design Iconic Font
• Fontawesome
• Meteocons
• Octicons
• Community Material
• Weather Icons
• Typeicons
• Entypo
• Devicon
• Foundation Icons
• Ionicons
• Material Design DX
• Pixeden 7 Stroke
• Phosphor
• Simple Icons
• Or create your own font with any icon needed.

Setup

Latest releases 🛠

• Kotlin | v5.4.0
• Pre-Release | v5.5.0-b01

1. Provide the gradle dependency

dependencies {
    //the core iconics library (without any widgets)
    implementation "com.mikepenz:iconics-core:${latestAndroidIconicsRelease}"
    implementation "androidx.appcompat:appcompat:${versions.appCompat}"
}

1b. (optional) Add the view's dependency

//this adds all ui view widgets (IconicsButton, IconicsImageView, ...)
implementation "com.mikepenz:iconics-views:${latestAndroidIconicsRelease}"

2. Choose your desired fonts

Note

Fonts ending with -kotlin require at least v4.x of Android-Iconics v5.1.x or newer requires the latest font versions

implementation 'com.mikepenz:google-material-typeface:4.0.0.3-kotlin@aar'
implementation 'com.mikepenz:google-material-typeface-{outlined|rounded|sharp}:4.0.0.2-kotlin@aar'
implementation 'com.mikepenz:material-design-iconic-typeface:2.2.0.9-kotlin@aar'
implementation 'com.mikepenz:fontawesome-typeface:5.9.0.3-kotlin@aar'
implementation 'com.mikepenz:octicons-typeface:11.1.0.1-kotlin@aar'
implementation 'com.mikepenz:meteocons-typeface:1.1.0.8-kotlin@aar'
implementation 'com.mikepenz:community-material-typeface:7.0.96.1-kotlin@aar' // note 5.3.45.1 and newer alphabetically sorts, and merges in 3 sections
implementation 'com.mikepenz:weather-icons-typeface:2.0.10.8-kotlin@aar'
implementation 'com.mikepenz:typeicons-typeface:2.0.7.8-kotlin@aar'
implementation 'com.mikepenz:entypo-typeface:1.0.0.8-kotlin@aar'
implementation 'com.mikepenz:devicon-typeface:2.0.0.8-kotlin@aar'
implementation 'com.mikepenz:foundation-icons-typeface:3.0.0.8-kotlin@aar'
implementation 'com.mikepenz:ionicons-typeface:2.0.1.8-kotlin@aar'
implementation 'com.mikepenz:pixeden-7-stroke-typeface:1.2.0.6-kotlin@aar'
implementation 'com.mikepenz:material-design-icons-dx-typeface:5.0.1.3-kotlin@aar'
implementation 'com.mikepenz:phosphor-typeface:1.0.0.1-kotlin@aar'
implementation 'com.mikepenz:simple-icons-typeface:17.0.0.3@aar'

Note

For users of the version catalog, it is not possible to add the type, however you can do so via the implementation definition. implementation(libs.material.typeface) { artifact { type = "aar" } }

Warning

The fonts use the jetpack startup library to automatically register themselves. If jetpack startup is disabled, it is required to manually register the fonts. Please find additional details in the Register fonts.

Usage

Note

It might be required to call Iconics.init(applicationContext) if no context based APIs are used from the library otherwise.

Use as drawable

IconicsDrawable(this, FontAwesome.Icon.faw_android).apply {
    colorInt = Color.RED
    sizeDp = 24
}

Use via XML

If you use the Iconics library via XML provide the icon you want to use in the following syntax: gmd-favorite --> fontId-iconName. A list of the available fonts and their fontId can be found here. All icon names from the default fonts can be found via the DEMO application.

Notation within text

Use the { icon-definer } syntax

Some great text with a {faw-android} font awesome icon and {met-wind} meteocons icons.

Drawable XML (API 24+)

Specify the drawable in your drawable folder.

<com.mikepenz.iconics.IconicsDrawable
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:ico_icon="gmd_favorite"
    app:ico_color="#0000FF"
    app:ico_contour_width="1dp"
    app:ico_contour_color="#00FFFF"
    app:ico_size="24dp" />
    // all custom theming attributes supported

Use like any normal drawable in your application. This feature was suggested and initially provided by @dzamlo

Custom Views

As IconicsImageView

<com.mikepenz.iconics.view.IconicsImageView
    android:layout_width="72dp"
    android:layout_height="72dp"
    app:iiv_color="@android:color/holo_red_dark"
    app:iiv_icon="gmd-favorite" />  // or @string/gmd_favorite with our generator
    //app:iiv_size="12dp"
    //app:iiv_padding="2dp"
    //app:iiv_contour_color="#FF0000"
    //app:iiv_contour_width="2dp"
    //app:iiv_background_color="#FFFF00"
    //app:iiv_corner_radius="2dp"
    //app:iiv_background_contour_color="#FF0000"
    //app:iiv_background_contour_width="1dp"
    //app:iiv_shadow_radius="4dp"
    //app:iiv_shadow_dx="1dp"
    //app:iiv_shadow_dy="1dp"
    //app:iiv_animations="spin|blink_alpha|blink_scale"

As IconicsTextView

<com.mikepenz.iconics.view.IconicsTextView
    android:text="abc{hif-test}defgh{faw-adjust}ijk{fon-test1}lmnopqrstuv{fon-test2}wxyz"
    android:textColor="@android:color/black"
    android:layout_width="wrap_content"
    android:layout_height="56dp"
    android:textSize="16sp"/>

As IconicsButton

<com.mikepenz.iconics.view.IconicsButton
    android:text="{faw-adjust} Button"
    android:layout_width="120dp"
    android:layout_height="60dp"/>

Compose

To include the experimental compose support in your project add the following dependency to your project (since v5.2.0)

implementation "com.mikepenz:iconics-compose:${latestAndroidIconicsRelease}"

Use the provided Image wrapper and set the icon.

Image(
    GoogleMaterial.Icon.gmd_access_alarm,
    colorFilter = ColorFilter.tint(MaterialTheme.colors.primary),
)

Screenshots

Available fonts

Link	Prefix	Dependency
Google Material Design Icons **ORIGINAL by
Google**	gmd,gmo,gmr,gms	implementation 'com.mikepenz:google-material-typeface{-outlined,rounded,sharp}:+@aar'
Material Design Iconic Font **Google Material
Iconic**	gmi	implementation 'com.mikepenz:material-design-iconic-typeface:+@aar'
Fontawesome	faw	implementation 'com.mikepenz:fontawesome-typeface:+@aar'
FontawesomeBrand	fab	implementation 'com.mikepenz:fontawesome-typeface:+@aar'
FontawesomeRegular	far	implementation 'com.mikepenz:fontawesome-typeface:+@aar'
Meteocons	met	implementation 'com.mikepenz:meteocons-typeface:+@aar'
Octicons	oct	implementation 'com.mikepenz:octicons-typeface:+@aar'
Community Material	cmd	implementation 'com.mikepenz:community-material-typeface:+@aar'
Weather Icons	wic	implementation 'com.mikepenz:weather-icons-typeface:+@aar'
Typeicons	typ	implementation 'com.mikepenz:typeicons-typeface:+@aar'
Entypo	ent	implementation 'com.mikepenz:entypo-typeface:+@aar'
Devicon	dev	implementation 'com.mikepenz:devicon-typeface:+@aar'
Foundation Icons	fou	implementation 'com.mikepenz:foundation-icons-typeface:+@aar'
Ionicons	ion	implementation 'com.mikepenz:ionicons-typeface:+@aar'
Pixden7Stroke	pe7	implementation 'com.mikepenz:pixeden-7-stroke-typeface:+@aar'
Material Design DX	cmf	implementation 'com.mikepenz:material-design-icons-dx-typeface:+@aar'
Phosphor Icons	pho	implementation 'com.mikepenz:phosphor-typeface:+@aar'
Simple Icons	sim	implementation 'com.mikepenz:simple-icons-typeface:+@aar'

Licenses for all included fonts are linked inside the class or can be found on the coresponding repositories.

Compatibility Note

appcompat:1.4.x

Appcompat v1.4.x introduces default enabled emoji support into all AppCompat* views, which prevents the IconicsView* views (iconics-views module) from properly applying the spannable style. To fix this problem, emoji support has to be disabled by doing:

app:emojiCompatEnabled="false"

More information on the appcompat emoji support: https://developer.android.com/jetpack/androidx/releases/appcompat#1.4.0-alpha01

Advanced Usage

Register fonts

If you want to add your own custom font, or a GenericFont you have to register this font (before using it). The best place to do this is the Application.

And initialize Iconics as you wish

class CustomApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        //register custom fonts like this (or also provide a font definition file)
        Iconics.registerFont(CustomFont())
    }
}

Advanced IconicsBuilder

Everything is easy and simple. Right? But now you got a single icon within your textview and you need additional styling? Just define the style for all icons or only a specific one. You can find this in the PlaygroundActivity of the sample too.

Iconics.Builder()
    .style(ForegroundColorSpan(Color.WHITE), BackgroundColorSpan(Color.BLACK), RelativeSizeSpan(2f))
    .styleFor(FontAwesome.Icon.faw_adjust, BackgroundColorSpan(Color.RED))
    .on(tv1)
    .build()

String icon-key or typeface enum

Sometimes you won't like to use the icon-key ("faw-adjust") like this, but use the enum provided by a specific font. Both is valid:

IconicsDrawable(this, "faw-adjust").actionBar()

IconicsDrawable(this, FontAwesome.Icon.faw_adjust).apply {
    sizeDp = 24
    paddingDp = 1
}

Create custom fonts

This is possible with only the *.ttf and *.css mapping file. And will take you 2 minutes.

You can get these two files by downloading a web icon font, or if you want to create your own custom icon font from *.svg files then you can use following tools:

• Fontello
• IcoMoon
• Fontastic
• let me know if you find other tools.

After you got those two files, head over to the icon addon creation tool android-iconics.mikepenz.com. Enter all the information. Add the *.ttf and *.css and click the button. It will generate and download the icon font addon as zip. (this tool is local only, no files are sent to a server, you can safely use it with any icons)

String fields for icons

For generating string field for each of icons of your font, you can use this simple generator: Android-Iconics String Generator

Android module generator

A awesome gradle plugin which can automatically fetch a font from Fontastic, and generate the Android Module for your project. Iconics-Font-Generator

ProGuard / R8

ProGuard / R8 rules are bundled internally with each font.

Special Contributor

• Baptiste Lagache Thanks for the gradle font module generator
• Also thanks for all the other contributors.

Credits

• Joan Zapata He is the creator of Android-Iconify which gave me the idea of this project. Some core concepts and ideas were reused, but everything is written from scratch.
• Christopher Jenkins Thanks for the great usage of a custom ContextWrapper inside Calligraphy
• Stephan Schober

Developed By

• Mike Penz

  • mikepenz.dev - blog.mikepenz.dev - [email protected]
  • paypal.me/mikepenz
  • Automatic changelog generation action

• Peter Gulko

  • github.com/zTrap

License

Copyright 2021 Mike Penz

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

android-iconics's Issues

Formatted text support

IconicsBuilder's on method accepting TextView doesn't care about any formatting (spans) in the text, probably because it puts existing text in StringBuilder and it keeps only the text, dropping the spans.

It would be great to add support for formatted text and maybe even I will make a pull request someday, but are there any current workarounds for achieving this result? (I want to insert some icons into some formatted text (for example, created by Html.fromHtml(…) or something like that)

com.mikepenz.iconics.view.IconicsImageView

com.mikepenz.iconics.view.IconicsImageView has never worked in my project. What actually do I do wrong?

This is what I have in my xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    ....>

    <com.mikepenz.iconics.view.IconicsImageView
        android:id="@+id/favorite_channel_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="5dp"
        app:iiv_icon="faw-android"/>

</LinearLayout>

Consider to replace Google Material Design icon by https://materialdesignicons.com/

New Material Design icon is in https://github.com/templarian/MaterialDesign/, or https://materialdesignicons.com/.

Why I think we should replace official Google Material Design icon by new Material Design icon?

• New Material Design icon includes Google Material Design icon.
• There are many more icons in New icon pack (>1000) than the Google icon pack, such as icon google-play...

IconicsImageView layout attributes doesn't work

I have problem to set icon and color from a layout for IconicsImageView. The attributes are not applied.

Example of layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <IconicsImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:iiv_icon="gmd-label"
        app:iiv_color="@color/secondary_text"/>
</LinearLayout>

Also Android Studio 1.2 Beta 3 say:

Unexpected namespace prefix "app" found for tag IconicsImageView less... (Ctrl+F1)

Most Android views have attributes in the Android namespace. When referencing these attributes you must include the namespace prefix, or your attribute will be interpreted by aapt as just a custom attribute.

Similarly, in manifest files, nearly all attributes should be in the android: namespace.

By the way there is no way to change icon color from the code (maybe possible via IconicsDrawable.colorRes(...)).

IconicsButton.setVisibility doesn't seem to work

Hello, I'm trying to dynamically hide/show IconicsButtons using Button.setVisibility() but it does not seem to work. It always shows the buttons
Here's the xml;

    <com.mikepenz.iconics.view.IconicsButton
        android:id="@+id/button_cancel"
        android:text="@string/icon_cancel"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center_vertical"
        android:textColor="@color/red"
        android:background="@android:color/transparent"
        tools:text="X"/>

    <com.mikepenz.iconics.view.IconicsButton
        android:id="@+id/button_download"
        android:text="@string/icon_download"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center_vertical"
        android:background="@android:color/transparent"
        android:textColor="@color/blue"
        tools:text="X"/>

and here's the adapter;

        if (mMode.equals(Constants.ATTACHMENT.MODE.READ)) {
            viewHolder.mCancelButton.setVisibility(View.GONE);
            viewHolder.mDownloadButton.setVisibility(View.VISIBLE);
        } else {
            viewHolder.mCancelButton.setVisibility(View.VISIBLE);
            viewHolder.mDownloadButton.setVisibility(View.GONE);
        }

I've also added watcher to debugger;

viewHolder.mCancelButton.getVisibility() = 8
View.GONE = 8

Are there any solutions to that problem?

Fix IconicButton

IconicButton won't show the icon

Custom font causes app to crash

I am able to create images just fine here through the IconicsDrawable. But if I try to use the IconicsTextView in the layout, it crashes with a custom font.

            <com.mikepenz.iconics.view.IconicsTextView
                android:id="@+id/text_icon"
                android:text="{font-myglyph}"
                android:textColor="@android:color/black"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="20sp" />

Now, if I use faw or gmd it works fine.

I register my new font in Application

        Iconics.registerFont(new MyCustomFont());

ITypeface shouldn't force me to add data

Adding the following methods to Typeface

    String getAuthor();

    String getUrl();

    String getDescription();

    String getLicense();

    String getLicenseUrl();

Is weird, it should be in a ILicense class?

Using alpha/transparency in colors

My code sets the colour of an icon as follows:

    menu.findItem(R.id.action_notification).setIcon(new IconicsDrawable(this, FontAwesome.Icon.faw_android).
            color(R.color.iconactive).sizeDp(24));

Color is defined with a transparency component. However it still appears black on my app when I run it. Is this not supported then?

 <color name="iconactive">#36000000</color>

Update play store sample

Improve Description

The description (README.md) needs some improvements to make it easier for new users to use this project.

Any ideas?

Icons not showing

Only the Custom Font of the sample is showing the Icons. Working now on this problem since 2 days but no result.

Can you help me ?

Expose size settings in IconicsImageDrawable

It is quite common to have an ImageView with a size of e.g. 40dp but containing a centered 24dp icon, to increase the touch-responsive area. Currently, using an IconicsImageView causes the icon to expand to fill the whole space. Exposing IconicsDrawable.setSizeDp() etc. as parameters of IconicsImaveView would resolve this.

Problem using Lollipop

On Lollipop, using IconicsButton, only the normal text "Button" is displayed.

 <IconicsButton
        android:text="{faw-adjust} Button"
        android:layout_width="120dp"
        android:layout_height="60dp"/>

Same code, on Kitkat shows both icon and text.

Set SPAN correct

I had used the wrong spannable definition -> Spannable.SPAN_EXCLUSIVE_INCLUSIVE
It should be -> Spannable.SPAN_EXCLUSIVE_EXCLUSIVE

This will be fixed in 0.5.2

Icons size is not correct

compile 'com.mikepenz:iconics:1.2.1@aar'

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.inflateMenu(R.menu.menu_main);
    toolbar.setNavigationIcon(
        new IconicsDrawable(this, GoogleMaterial.Icon.gmd_arrow_back).actionBar());
    toolbar.getMenu()
        .findItem(R.id.action_share)
        .setIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_arrow_back).actionBar());
    toolbar.getMenu()
        .findItem(R.id.action_comment)
        .setIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_comment).actionBar());

icons size not the standard Material Design

if i use

compile 'com.mikepenz.iconics:library:0.7.5@aar'

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.inflateMenu(R.menu.menu_main);
    toolbar.setNavigationIcon(
        new IconicsDrawableOld(this, GoogleMaterial.Icon.gmd_arrow_back).actionBarSize());
    toolbar.getMenu()
        .findItem(R.id.action_share)
        .setIcon(new IconicsDrawableOld(this, GoogleMaterial.Icon.gmd_arrow_back).actionBarSize());
    toolbar.getMenu()
        .findItem(R.id.action_comment)
        .setIcon(new IconicsDrawableOld(this, GoogleMaterial.Icon.gmd_comment).actionBarSize());

this is the correct size

Padding is not working properly on Android M

Hi. I noticed that android:padding setting for IconicsImageView is not working properly on Android M.

code (activity_playground.xml)

<com.mikepenz.iconics.view.IconicsImageView
    android:layout_width="72dp"
    android:layout_height="72dp"
    android:padding="24dp"
    app:iiv_icon="faw-android" />

IconicsButton not display the icon in Lollipop

I'm using the Navigation Drawer with the icons of the font (google material), and works perfect in all devices (API 10, Lollipop and others).

I'm also using the IconicsImageView and also works well in all devices.

But the IconicsButton don't show the icon in Lollipop (in the others devices works perfect), a cross appears like a "Chinese icon"...

IconicsTextView and Html.fromHtml colors

IconicsTextView doesn't follow HTML colors when using setText(Html.fromHtml('Test: <font color='#FF0000'>Colored text goes here</font>')). Is this intentional, a bug or a feature? ;-)

Min SDK lower than 15 ?

Any chance that this will work on minSdkVersion 10 for example ?

Error in inflating IconicsButton when migrating 1.3.0 to 1.5.2

Hi,
After changing build.gradle version, the app keeps crashing and says something like the following;
Error inflating com.mikepenz.view.IconicsButton.
I tried cleaning and rebuilding the app and I tried uninstalling & reinstalling the app but it doesn't seem to be working.
Finally, if I downgrade from 1.5.2 to 1.3.0, it works.
If there are any breaking changes, please write them in release notes.

Google Materials icons not working on IconicsTextView

I have registered on a customApplication the google material icons:

Iconics.registerFont(new GoogleMaterial());

And try to use it on a textview:

<android.view.IconicsTextView
                        android:id="@+id/next"
                        android:layout_width="48dp"
                        android:layout_height="wrap_content"
                        android:text="{gmd_android}"
                        android:textColor="@android:color/white"
                        android:textSize="16sp"
                        android:contentDescription="Next"/>

But the inflater tries to create it throws a null exception.
I have tried with a fontawesome icon and it works (even without it registered on the application)

If I try to use the GoogleMaterial icons through

new IconicsDrawable(getActivity(), GoogleMaterial.Icon.gmd_android)

it does work.

I don't know what is happening here:

(Using 0.7.9)

Cache Drawable

Implement a function to cache created bitmaps, to prevent creating them over and over again.

Why the icons on the buttons are so small ?

Hi, Mike, I'm using this library and everything is perfect, except for a small observation on the buttons.

I explain here:

I have in my application buttons 50dpi (width) and 50dpi(height), this size is perfect for showing the icons of google material design (PNG), (I put in all the folders, the icon with all resolutions drawable-MDPI, drawable- hdpi..etc ...)

the icon is displayed perfect and almost fills the size of the button.

but if I want to do the same with the button of this library, the icon is very small, almost half of the other.

to summarize:
with a button of 50x50 and using PNG images the icon fills the button perfect.
but with the button of this library the icon can barely be seen (to small).

Is it possible to assign in the xml, the resolution of the icon to display on the button?
the icon is automatically adapted to the size of the button?

Pushing latest update to maven central

Any chance you could push the latest build to maven central? The placeholder icon in the library is overriding our default app icon with iconics 0.7.6, so i'm guessing there hasn't been a more recent push.

Thanks!

Change extractor to use min.css

As referenced there: primer/octicons#60

If they merge the pull request, maybe should be add an example of extractor

CSS to compatible lib

It would be cool to get an NPM module going that converts TTF / CSS data into a custom font library ready for Android-Iconics.

Something like this:
https://github.com/FokkeZB/IconFont

Not an issue but can you make minSdkVersion

not an issue, but can you please make minSdkVersion 10 for the google-material-typeface ?

Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 10 cannot be smaller than version 14 declared in library com.mikepenz.iconics:google-material-typeface:1.0.0

How to have a round background for Icon?

Hello Mike

Thank you for your library, it work like charm.

I want to add a round background behind icon? Like black round background and white icon.
I am trying to do by converting to bitmap. What would be optimal way to do so?

TIA :)

How to use in Widget

Mike, I need to convert IconicsDrawable to Bitmap to use icon inside home widget.

When I do it only outline is visible in bitmap, do you now better way to use IconicsDrawable in widget with remoteview ?

Thank you

Clarify icon's font creation process.

Hi, guys.
Recently I used Android-Iconics with my custom font with icons. I faced with the problem that there is lack of information how to generate custom icon font. Maybe it worth mentioning a few lines about this process in README.MD.

Font Awesome Update

Hi. Just for you to notice: There was an update von fontawesome (4.3.0) - maybe you want to get it.

http://fortawesome.github.io/Font-Awesome/

Stacked icons

How do you create the below using Android-Iconics? Looked at the demo but I seem not to get an example for this.

<span class="fa-stack fa-lg fa-5x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-cloud  fa-stack-1x"></i>
</span>

Basically a cloud icon with a square around it.

The output is here http://jsfiddle.net/mutinda/w5zbxm20/

Is it really a good idea to put View classes into android package?

I mean, these classes https://github.com/mikepenz/Android-Iconics/tree/master/library/src/main/java/android/view. There's a benefit of not having to type the package name in XML layout definitions, but if everyone will do like this, there will be name clashes (because packages are no longer preventing them).

R.color.<value> incorrectly sets color

I want a 54% opacity on an all black icon (its what android asset studio generates their icon colors as).
If I set it as follows:

mNavBtn.setImageDrawable(
        new IconicsDrawable(this, FontAwesome.Icon.faw_location_arrow)
                .color(0x8a000000)
                .sizeDp(24));

I get the correct color. If I try to use values in my colors.xml, the color is all wrong.

mNavBtn.setImageDrawable(
        new IconicsDrawable(this, FontAwesome.Icon.faw_location_arrow)
                .color(R.id.ButtonColor)
                .sizeDp(24));

I get a wrong color. I found this stackoverflow post that gives me the work around:

mNavBtn.setImageDrawable(
        new IconicsDrawable(this, FontAwesome.Icon.faw_location_arrow)
                .color(getResources().getColor(R.id.ButtonColor))
                .sizeDp(24));

Not sure if using getColor() is the intended behavior. Maybe you'll want to add it to the README or mention it somewhere --- I was definitely confused by it!

Missing icon "gmd-favorite-outline".

After last update (1.0.2) PlaygroundActivity crashes with :

Caused by: java.lang.IllegalArgumentException: gmd_favorite_outline is not a constant in com.mikepenz.google_material_typeface_library.GoogleMaterial$Icon

due to missing icon gmd_favorite_outline.

Add ability to update an existing library

Hi.

As you can see in https://octicons.github.com/, currently the Octicons library is version 2.2.2, and the app uses 2.2.0.

How can i update the Octicons lib (or anyone else), without recreate full Octicons class? Is there any way to .withFontFil("file.ttf);?

Font mapping legend

Hi there,

I've recently used your library in my app but have an issue which I hope you can clarify. A disclaimer: I'm a beginner at Android programming. I've attached a screenshot to show you exactly what happens.

I have two icons next to each other in an XML as so:

<com.mikepenz.iconics.view.IconicsButton
                    android:id="@+id/button_share"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/button_star"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:text="{gmd-favorite-outline}"
                    android:textColor="@color/primary_dark_material_light"
                    android:textSize="24sp" />

<com.mikepenz.iconics.view.IconicsButton
                    android:id="@+id/button_star"
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:text="{faw-star-o}"
                    android:textColor="@color/primary_dark_material_light"
                    android:textSize="24sp" />

The button using Font Awesome renders perfectly but the button using GMD just shows me the text. What am I doing wrong?

Here is the screenshot:

Can the legend for the different fonts be added to the README as well?

IconicsButton with AppcompatButton Style ?

hey mike, I wonder why the buttons appear with the old theme rather than to the material style.

I have all my application buttons with material theme, and this buttons appear ugly with old theme.

Center Text

Center Text if the set icon has a different size

java.lang.NullPointerException for IconicsImageView in 1.5.1/1.5.2

Tried migrating from 1.3.0 to 1.5.2 but ran into a NPE when trying to use IconicsImageView. Created a blank test project, added the dependency in build.gradle (full, not core), and created a simple IconicsImageView (copied from the sample app):

<com.mikepenz.iconics.view.IconicsImageView
    android:layout_width="72dp"
    android:layout_height="72dp"
    app:iiv_color="@android:color/holo_red_dark"
    app:iiv_icon="gmd-favorite" />

But it causes the following:

08-03 00:50:39.859    3415-3415/? E/AndroidRuntime﹕ FATAL EXCEPTION: main
    Process: com.example.myapplication, PID: 3415
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.myapplication/com.example.myapplication.MainActivity}: android.view.InflateException: Binary XML file line #146: Error inflating class com.mikepenz.iconics.view.IconicsImageView

<snip>

Caused by: java.lang.NullPointerException: Attempt to invoke interface method 'com.mikepenz.iconics.typeface.IIcon com.mikepenz.iconics.typeface.ITypeface.getIcon(java.lang.String)' on a null object reference
    at com.mikepenz.iconics.IconicsDrawable.<init>(IconicsDrawable.java:109)
    at com.mikepenz.iconics.view.IconicsImageView.<init>(IconicsImageView.java:56)
    at com.mikepenz.iconics.view.IconicsImageView.<init>(IconicsImageView.java:39)

Seems like Iconics.findFont() is returning null - can't find the font? The sample app works fine, but I didn't split it out from the locally compiled library.

Am I missing something here...?

Does not work with the Preview mode in Android Studio layout editor

Is there a way to fix it?
My code looks like below - if I remove the IconicsTextView it renders properly, but not with it

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:layout_marginLeft="@dimen/card_gap"
    android:layout_marginRight="@dimen/card_gap"
    android:gravity="center_vertical">



    <TextView
        android:id="@+id/like_count_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="47 likes"
        android:textColor="@color/gray7"
        android:textSize="14sp"
        android:textStyle="bold" />

    <IconicsTextView
        android:id="@+id/like_icon_tv"
        android:text="{faw-heart-o}"
        android:textColor="@color/em_green_base"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/like_count_tv"
        android:layout_alignTop="@id/like_count_tv"
        android:gravity="center"

        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:textSize="14sp"/>



</RelativeLayout>

Icon + Text not centered?

I have the following:

<com.mikepenz.iconics.view.IconicsButton
    android:id="@+id/facebookLogin"
    android:theme="@style/Button_Facebook"
    android:text="{faw-facebook} Log in with Facebook"
    android:textAllCaps="false"
    android:layout_below="@+id/textView2"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="16dp"
    android:layout_width="wrap_content"
    android:layout_height="56dp"
    android:textColor="@android:color/white"
    android:textSize="20sp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">
</com.mikepenz.iconics.view.IconicsButton>

The icon doesn't seem to be centered with the text. Is this something wrong with my implementation or a bug? The padding also doesn't seem to apply. Any help is appreciated!

Alphabetic icon

Hi.

It's possible to get a drawable from a "regular" character? Something like:

new IconicsDrawable(Context, "A");

Or

new IconicsDrawable(Context, "?");

rectangle instead of a drawable

Keep getting this:

I'm on eclipse. Any idea what it could be? Was trying FontAwesome.Icon.faw_edit, but it's the same for all...

Cool lib. Thank you :)

Error inflating class (App crashes)

with V1.2.1

when i only add this to the layout xml :

<com.mikepenz.iconics.view.IconicsImageView
            android:layout_width="72dp"
            android:layout_height="72dp"
            app:iiv_icon="gmd-favorite-outline"
            app:iiv_color="@android:color/holo_red_dark"
            />

My app crashes :

    android.view.InflateException: Binary XML file line #42: Error inflating class com.mikepenz.iconics.view.IconicsImageView
            at android.view.LayoutInflater.createView(LayoutInflater.java:626)
            at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:702)
            at android.view.LayoutInflater.rInflate(LayoutInflater.java:761)
            at android.view.LayoutInflater.rInflate(LayoutInflater.java:769)
            at android.view.LayoutInflater.inflate(LayoutInflater.java:498)
            at android.view.LayoutInflater.inflate(LayoutInflater.java:398)
            at com.mine.do.SampleFragment.onCreateView(SampleFragment.java:66)
            at android.support.v4.app.Fragment.performCreateView(Fragment.java:1786)
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:953)
            at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1136)
            at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:739)
            at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1499)
            at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:488)
            at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:141)
            at android.support.v4.view.ViewPager.populate(ViewPager.java:1073)
            at android.support.v4.view.ViewPager.populate(ViewPager.java:919)
            at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1441)
            at android.view.View.measure(View.java:17479)
            at android.widget.LinearLayout.measureVertical(LinearLayout.java:847)
            at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
            at android.view.View.measure(View.java:17479)
            at android.support.v4.widget.DrawerLayout.onMeasure(DrawerLayout.java:868)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5364)
            at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5364)
            at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
            at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
            at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5364)
            at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5364)
            at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
            at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
            at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5364)
            at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
            at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2532)
            at android.view.View.measure(View.java:17479)
            at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2262)
            at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1391)
            at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1590)
            at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1249)
            at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6585)
            at android.view.Choreographer$CallbackRecord.run(Choreographer.java:803)
            at android.view.Choreographer.doCallbacks(Choreographer.java:603)
            at android.view.Choreographer.doFrame(Choreographer.java:573)
            at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:789)
            at android.os.Handler.handleCallback(Handler.java:733)
            at android.os.Handler.dispatchMessage(Handler.java:95)
            at android.os.Looper.loop(Looper.java:136)
            at android.app.ActivityThread.main(ActivityThread.java:5586)
            at java.lang.reflect.Method.invokeNative(

Icon is created then disappears

I included "compile 'com.mikepenz:iconics:1.0.1@aar'" in my gradle config and then tried to used both IconicsTextView and IconicsImageView in a layout. The icon (I tried different ones) appears briefly and then disappears. In case of a conflict, I tried both with and without your Material Drawer library.

Example layout:

<RelativeLayout
        android:id="@+id/card_border"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/accent"
        android:gravity="fill_vertical"
        android:paddingBottom="8dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="8dp">
        <android.support.v7.widget.AppCompatTextView
                android:id="@+id/txtGame"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:text="CE"
                android:textColor="@android:color/white"
                android:textIsSelectable="false"
                android:textSize="12sp"
                android:typeface="sans"/>
        <com.mikepenz.iconics.view.IconicsTextView
                android:id="@+id/iconAlert"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_centerInParent="true"
                android:text="{gmd-error}"
                android:textAlignment="center"
                android:textColor="@android:color/white"
                android:textSize="16sp"/>
        <android.support.v7.widget.AppCompatTextView
                android:id="@+id/txtLevel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:singleLine="false"
                android:text="***"
                android:textColor="@android:color/white"
                android:textIsSelectable="false"
                android:textSize="12sp"
                android:typeface="sans"/>
</RelativeLayout>

TextView drawable padding

Hi Mike, I am not sure if this a question or improve request. But have any method to add a padding between image and text ?

thx

Set Style per Icon-Identifier within a Text

It should be possible to set the style of the icons not only for a whole text, but also for a single icon identified by it's key so in the following example it should be possible to set the style for {icon-faw-adjust} or {icon-fon-test1}

abcdef{icon-fon-test1}ghijk{icon-faw-adjust}lmnopqr{icon-fon-test1}

If an icon is set twice you won't be able to style one one of them. This is a limitation. Could be solved if i add an identifier for the style, but i think this is a really rare usecase.

set it as drawable top

I want to set drawable top/right/left/bottom.
I tried something like this

textView_main_updated.setCompoundDrawables(new IconicsDrawable(context, FontAwesome.Icon.faw_android).color(Color.GREEN),null,null, null);
new Iconics.IconicsBuilder().ctx(context).on(textView_main_updated).build();

but it doesn't work. am I doing something wrong ?